您的位置
主页 > 网站技术 > CSS/HTML > » 正文

纯css实现让div的四个角成弧形

来源: 站长圈 点击:

点评:让p的四个角成弧形在某些特殊的情况下还是可以用得到的,下面使用纯css实现下,希望对大家有所帮助!

复制代码代码如下:

<html> 

<head> 

<style type="text/css"> 

.img-preview{ 

-moz-border-bottom-colors: none; 

-moz-border-left-colors: none; 

-moz-border-right-colors: none; 

-moz-border-top-colors: none; 

border-bottom-color: #B8B8B8; 

border-bottom-left-radius: 5px; 

border-bottom-right-radius: 5px; 

border-bottom-style: solid; 

border-bottom-width: 1px; 

border-image-outset: 0 0 0 0; 

border-image-repeat: stretch stretch; 

border-image-slice: 100% 100% 100% 100%; 

border-image-source: none; 

border-image-width: 1 1 1 1; 

border-left-color-ltr-source: physical; 

border-left-color-rtl-source: physical; 

border-left-color-value: #B8B8B8; 

border-left-style-ltr-source: physical; 

border-left-style-rtl-source: physical; 

border-left-style-value: solid; 

border-left-width-ltr-source: physical; 

border-left-width-rtl-source: physical; 

border-left-width-value: 1px; 

border-right-color-ltr-source: physical; 

border-right-color-rtl-source: physical; 

border-right-color-value: #B8B8B8; 

border-right-style-ltr-source: physical; 

border-right-style-rtl-source: physical; 

border-right-style-value: solid; 

border-right-width-ltr-source: physical; 

border-right-width-rtl-source: physical; 

border-right-width-value: 1px; 

border-top-color: #B8B8B8; 

border-top-left-radius: 5px; 

border-top-right-radius: 5px; 

border-top-style: solid; 

border-top-width: 1px; 

box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1); 

float: left; 

width: 350px; 

height:200px; 

</style> 

</head> 

<body> 

<p class="img-preview"></p>

</body> 

</html> 




首页  - 关于站长圈  - 广告服务  - 联系我们  - 关于站长圈  - 网站地图  - 版权声明