css CSS3边框：圆角，阴影，边框图像等

Posted 2021-05-13

CSS3 调整尺寸(Resizing)
CSS3中，resize属性指定一个元素是否应该由用户去调整大小。

这个 div 元素由用户调整大小。 (在 Firefox 4+, Chrome, 和 Safari中)
CSS代码如下：

OperaSafariChromeFirefoxInternet Explorer实例
由用户指定一个div元素尺寸大小：

div
{
    resize:both;
    overflow:auto;
}


CSS3 方框大小调整(Box Sizing)
box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容。

OperaSafariChromeFirefoxInternet Explorer实例
规定两个并排的带边框方框：

div
{
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    width:50%;
    float:left;
}



CSS3 外形修饰（outline-offset ）
outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。

轮廓与边框有两点不同：

轮廓不占用空间

轮廓可能是非矩形

这个 div 在边框之外 15 像素处有一个轮廓。
The CSS code is as follows:

OperaSafariChromeFirefoxInternet Explorer实例
规定边框边缘之外 15 像素处的轮廓：

div
{
    border:2px solid black;
    outline:2px solid red;
    outline-offset:15px;
}

在div中添加圆角元素：

div 
{ 
border:2px solid; 
border-radius:25px; 
}
-----------------------
使用 CSS3 border-radius 属性，你可以给任何元素制作 "圆角"。
1. 指定背景颜色的元素圆角：
#rcorners1 {
    border-radius: 25px;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}
2. 指定边框的元素圆角:
#rcorners2 {
    border-radius: 25px;
    border: 2px solid #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}

3. 指定背景图片的元素圆角:
#rcorners3 {
    border-radius: 25px;
    background: url(/statics/images/course/paper.gif);
    background-position: left top;
    background-repeat: repeat;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}
如果你在 border-radius 属性中只指定一个值，那么将生成 4 个 圆角。

但是，如果你要在四个角上一一指定，可以使用以下规则：

四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。

三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角

两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角

一个值： 四个圆角值相同
CSS3 圆角属性
属性	描述
border-radius	所有四个边角 border-*-*-radius 属性的缩写
border-top-left-radius	定义了左上角的弧度
border-top-right-radius	定义了右上角的弧度
border-bottom-right-radius	定义了右下角的弧度
border-bottom-left-radius	定义了左下角的弧度

有了CSS3的border-image属性，你可以使用图像创建一个边框：

border-image属性允许你指定一个图片作为边框！用于创建上文边框的原始图像：
在div中使用图片创建边框:
div 
{ 
border-image:url(border.png) 30 30 round; 
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */ 
-o-border-image:url(border.png) 30 30 round; /* Opera */ 
}

在div中添加box-shadow属性

div 
{ 
box-shadow: 10px 10px 5px #888888; 
}