- A+
所属分类：Web前端
环绕距离控制：
<!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>
使用浮动控制文本内容环绕排版：
<!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>
围绕图片的文本绕排：
<!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格式的图片才会有效果！！！
