CSS3边框和圆角

回顾CSS边框属性:

border-width

border-color

border-style

具体见CSS盒模型及应用

CSS3圆角

border-radius

一个最多可以指定四个border-*-*-radius属性的复合属性,这个属性允许我们为元素添加圆角边框。

语法:

 兼容性:

 

  补充:

  border-radius:50%;

  50%相对的是元素的宽和高,如果元素是长方形则设置完border-radius成为一个椭圆形,如果元素是正方形则设置完border-radius成为一个圆形。

CSS3盒阴影

box-shadow3

设置一个或多个下拉阴影的框。

语法:

模糊不允许负值

 兼容性:

CSS3边界图片

border-image

构建美丽的可扩展按钮~

语法:

各属性详解:

  

MDN网址:https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-image-slice

  会代替border-width的宽度;百分比是相对于原图片的宽高

  

  

测试网址:https://www.runoob.com/try/playit.php?f=playcss_border-image-repeat&preval=round

   兼容性:

opera要加前缀-o-

理解:

 

原文地址:https://www.cnblogs.com/superjishere/p/12259922.html