温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

CSS3中的边框属性怎么使用

发布时间:2022-02-25 17:03:07 来源:亿速云 阅读:123 作者:iii 栏目:web开发

这篇文章主要讲解了“CSS3中的边框属性怎么使用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“CSS3中的边框属性怎么使用”吧!

CSS3中的边框属性怎么使用

  css3边框

  (1)边框阴影

  box-shadow:h-shadowv-shadowblurspreadcolorinset

  h-shadow,v-shadow:水平和垂直方向的阴影位置,可以写负值

  blur:模糊距离(值越大越模糊)。

  spread:阴影的尺寸

  color:阴影的颜色

  inset:将外部阴影(outset)改为内部阴影

  前面两个值是必选的,后面四个值是可选的

  div{

  width:100px;

  height:100px;

  background-color:pink;

  box-shadow:10px10px10pxgray;

  }

  Image16.jpg

  (2)边框图片

  border-image:srcslicewidthoutsetrepeat

  src:图片的路径。

  slice:图片边框向内偏移。

  width:图片边框的宽度。

  outset:边框图像区域超出边框的量。

  repeat:图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)

  注意浏览器兼容问题

  div{

  border:20pxsolidtransparent;

  width:100px;

  height:50px;

  line-height:50px;

  text-align:center;

  padding:10px20px;

  border-image:url(images/12.png)5050round;

  -moz-border-image:url(images/12.png)5050round;/*Firefox*/

  -webkit-border-image:url(images/12.jpg)5050round;/*Safari和Chrome*/

  -o-border-image:url(images/12.png)5050round;/*Opera*/

  }

  Image21.jpg

  (3)边框圆角

  border-radius

  div{

  width:150px;

  height:30px;

  border:2pxsolid#ccc;

  border-radius:25px;

  line-height:30px;

  text-align:center;

  }

感谢各位的阅读,以上就是“CSS3中的边框属性怎么使用”的内容了,经过本文的学习后,相信大家对CSS3中的边框属性怎么使用这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI