欢迎光临
我的个人博客网站

CSS 3 浮动布局,深度挖掘-2 -cyy

环绕距离控制:

<!DOCTYPE html> <html> <head> <title>css</title> <style type="text/css">     p{         border:2px solid #ddd;         padding:10px;         overflow:hidden;     }     span.shape{         width:200px;         height:200px;         border:2px solid red;         padding:5px;         margin:5px;         display:block;         float:left;         /*环绕距离控制:*/         shape-outside:content-box;         shape-outside:padding-box;         shape-outside:border-box;         shape-outside:margin-box;     } </style> </head>  <body> <p> <span class="shape"></span>     HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准,是构建以及呈现互联网内容的一种语言方式.被认为是互联网的核心技术之一。HTML产生于1990年,1997年HTML4成为互联网标准,并广泛应用于互联网应用的开发。 HTML5是Web中核心语言HTML的规范,用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的,在浏览器中通过一些技术处理将其转换成为了可识别的信息。HTML5在从前HTML4.01的基础上进行了一定的改进,虽然技术人员在开发过程中可能不会将这些新技术投入应用,但是对于该种技术的新特性,网站开发技术人员是必须要有所了解的。 </p> </body>  </html>

 

浮动显示区域形状定制:

<!DOCTYPE html> <html> <head> <title>css</title> <style type="text/css">     p{         border:2px solid #ddd;         padding:10px;         overflow:hidden;     }     span.shape{         width:100px;         height:100px;         background:pink;         margin:5px;         display:block;         float:left;         shape-outside:margin-box;         /*圆形,at后面设置圆心*/         clip-path:circle(50%);         clip-path:circle(50% at 100% 0);         clip-path:circle(50% at 100% 100%);         /*椭圆*/         clip-path:ellipse(30% 50%);         /*多边形*/         clip-path:polygon(50% 0,100% 100%,0 100%);         clip-path:polygon(50% 0,100% 50%,100% 100%,0 100%,0 50%);     } </style> </head>  <body> <p> <span class="shape"></span>     HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准,是构建以及呈现互联网内容的一种语言方式.被认为是互联网的核心技术之一。HTML产生于1990年,1997年HTML4成为互联网标准,并广泛应用于互联网应用的开发。 HTML5是Web中核心语言HTML的规范,用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的,在浏览器中通过一些技术处理将其转换成为了可识别的信息。HTML5在从前HTML4.01的基础上进行了一定的改进,虽然技术人员在开发过程中可能不会将这些新技术投入应用,但是对于该种技术的新特性,网站开发技术人员是必须要有所了解的。 </p> </body>  </html>

CSS 3 浮动布局,深度挖掘-2 -cyy

 

 

使用浮动控制文本内容环绕排版:

<!DOCTYPE html> <html> <head> <title>css</title> <style type="text/css">     p{         border:2px solid #ddd;         padding:10px;         overflow:hidden;     }     span.shape{         width:100px;         height:100px;         background:pink;         margin:5px;         display:block;         float:left;         /*将shape-outside的值,设置成跟clip-path一致*/         shape-outside:polygon(0 0,100% 100%,0 100%);         clip-path:polygon(0 0,100% 100%,0 100%);         shape-outside:circle();         clip-path:circle();         shape-outside:ellipse(30% 70%);         clip-path:ellipse(30% 70%);     } </style> </head>  <body> <p> <span class="shape"></span>     HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准,是构建以及呈现互联网内容的一种语言方式.被认为是互联网的核心技术之一。HTML产生于1990年,1997年HTML4成为互联网标准,并广泛应用于互联网应用的开发。 HTML5是Web中核心语言HTML的规范,用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的,在浏览器中通过一些技术处理将其转换成为了可识别的信息。HTML5在从前HTML4.01的基础上进行了一定的改进,虽然技术人员在开发过程中可能不会将这些新技术投入应用,但是对于该种技术的新特性,网站开发技术人员是必须要有所了解的。 </p> </body>  </html>

CSS 3 浮动布局,深度挖掘-2 -cyy

 

 

围绕图片的文本绕排:

<!DOCTYPE html> <html> <head> <title>css</title> <style type="text/css">     p{         border:2px solid #ddd;         padding:10px;         overflow:hidden;     }     img{         width:100px;         height:100px;         margin:5px;         display:block;         float:left;         /*将shape-outside的值,设置成跟url一致*/         shape-outside:url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1604813720912&di=9cd496dbf6cb5870254d4aef6b6854bc&imgtype=0&src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202007%2F15%2F20200715071202_ofuwl.thumb.400_0.jpeg);     } </style> </head>  <body> <p> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1604813720912&di=9cd496dbf6cb5870254d4aef6b6854bc&imgtype=0&src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202007%2F15%2F20200715071202_ofuwl.thumb.400_0.jpeg">     HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准,是构建以及呈现互联网内容的一种语言方式.被认为是互联网的核心技术之一。HTML产生于1990年,1997年HTML4成为互联网标准,并广泛应用于互联网应用的开发。 HTML5是Web中核心语言HTML的规范,用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的,在浏览器中通过一些技术处理将其转换成为了可识别的信息。HTML5在从前HTML4.01的基础上进行了一定的改进,虽然技术人员在开发过程中可能不会将这些新技术投入应用,但是对于该种技术的新特性,网站开发技术人员是必须要有所了解的。 </p> </body>  </html>

注意:只有对于png格式的图片才会有效果!!!

 

赞(0) 打赏
未经允许不得转载:张拓的天空 » CSS 3 浮动布局,深度挖掘-2 -cyy
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏