css3内凹圆角边框,css圆形边框

CSS3 利用“box-shadow”属性结合“outline”制作“边框内圆角”

box-shadow：给元素块添加周边阴影效果。

语法：box-shadow: h-shadow v-shadow blur spread color inset;

*还有另一种情况： box-shadow: 0 2px 2px #FECC84

当我们在色值前只写了三个数值的情况下，则第三个值是 blur （模糊距离）。

利用阴影属性，也可以实现外边框的效果：

当我们再为它添加一个 outline （轮廓），就会发现它实现了-边框内圆角：

* 关于为什么会这样：

outline的描边并不会跟着圆角走，因此显示为直角。

所以把这两者叠加到一起，box-shadow 则刚好填补描边与容器圆角之间的空隙。

*值得注意的是，box-shadow 阴影的大小值并不一定等于描边的宽度，它和圆角的大小有关系。所以只需要一个足够填补空隙的大小就可以了。事实上，制定一个等于描边宽度的值在某些浏览器中可能会渲染异常，所以，最好是稍小的值。

参考书籍： Lea Verou 《CSS揭秘》

怎样用css写出圆形边框

1、首先打开sublime?text编辑器，新建一个html文件，里面写入一个p标签：

2、然后设置p标签的样式，这里先设置一个边框，然后设置圆角边框，主要使用CSS3属性border-radius属性定义圆角效果。其中的数值为参数length是浮点数和单位标识符组成的长度值，不可为负值，这里圆角的值越大，圆角的弧度也越大：

3、最后打开浏览器，就可以看到圆角边框了：

用CSS3怎么实现圆角边框？

#gaga{border:3px solid #f00;border-radius: 5px 6px 7px 8px;}

5px代表的是左上角的弧度；

6px代表的是右上角的弧度；

7px代表的是右下角的弧度；

8px代表的是左下角的弧度；

希望可以帮到你

css3实现两个div中间内凹圆角

html标签如下

ul class="uls"

li1 ? ? ? ?span class="li-boradiu"/span

/li

li2 ? ? ? ?span class="li-boradiu"/span

/li

li3/li/ul

css标签如下

uls{list-style-type: none;*zoom: -1;}

uls:after{content: "";clear: both;display: block;}

uls li{display: block;float: left;width: 120px;height: 35px;background-color: #4169E1;text-align: center;line-height: 35px;color: white;/*做上圆角*/border-top-left-radius : 15px; ? ?border-top-right-radius : 15px; ? ?}

li-boradiu{display: inline-block;width: 35px;height: 35px;/*background-color: #4169E1;*/background-image: radial-gradient(70px at 17.5px 0, #f00);}