CSS3的奇技淫巧/border与border-radius构成的奇异图形

一、border

border 简写属性在一个声明设置全部的边框属性。

属性值：
border-width:规定边框的宽度;
取值：
thin:定义细的边框。
medium:默认。定义中等的边框。
thick:定义粗的边框。
length:容许您自定义边框的宽度。经常使用，本身设置宽度大小。
inherit:规定应该从父元素继承边框宽度。

border-style:规定边框的样式;
取值：
none:定义无边框。
hidden:与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted:定义点状边框。在大多数浏览器中呈现为实线。 用过。
dashed:定义虚线。在大多数浏览器中呈现为实线。经常使用。
solid:定义实线。经常使用
double:定义双线。双线的宽度等于 border-width 的值。
groove:定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge:定义 3D 垄状边框。其效果取决于 border-color 的值。
inset:定义 3D inset 边框。其效果取决于 border-color 的值。
outset:定义 3D outset 边框。其效果取决于 border-color 的值。
inherit:规定应该从父元素继承边框样式。

border-color:规定边框的颜色;
取值：
color_name:规定颜色值为颜色名称的边框颜色（好比 red）。
hex_number:规定颜色值为十六进制值的边框颜色（好比 #ff0000）。
rgb_number:规定颜色值为 rgb 代码的边框颜色（好比 rgb(255,0,0)）。
transparent:默认值。边框颜色为透明。有用。
inherit:规定应该从父元素继承边框颜色。

二、border-radius

border-radius属性是一个简写属性，用于设置四个 border-*-radius 属性。
border-radius的取值：
length:定义圆角的形状。应该是圆角弧度的大小。
%:以百分比定义圆角的形状。

三、使用纯css实现三角形图标

原理就是利用四个边线的分界线之间的倒角来生成三角形。

以下样式表
<div id = "test"></div>
<style type="text/css">
    #test{
        width: 100px;
        height: 100px;
        border-top: 40px solid #0f0;
        border-right: 40px solid #ff0000;
        border-left: 40px solid #ffff00;
        border-bottom: 40px solid #000;
    }
</style>
为了便于区分，让四个边界的颜色不同。内容大小也先不为0，符合日常使用的样式。

设置内容区域为0;(width:0;height:0)结果以下图

若是设置上、右、下的颜色为跟背景相同的颜色||transparent(透明)，或者设置上下与背景相同||transparent(透明)，右边框为none;结果就是一个三角形，别的方向上的三角形也是同理。

#test{
    width: 0px;
    height:0px;
    border-top: 40px solid transparent;
    border-right: 40px solid transparent;
    border-left: 40px solid #ffff00;
    border-bottom: 40px solid transparent;
}

右上角图像。

#test {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-left: 100px solid transparent; 
　　/*只有两个边框的时候，交线为左上到右下*/
}

或者能够改变四个边线的宽度，或者隐藏，生成本身须要的样式。

#test{
    width: 0px;
    height:0px;
    border-top: 40px solid #ff00ff;
    border-right: 100px solid #ff0000;
    border-left: 400px solid #00ff00;
    border-bottom: 40px solid #00ffff;
}

四、使用border-radius构造有趣图形边框

通常常见的应用（正方形的内容），如图1
<div id = "test"></div>
<style type="text/css">
#test{
    width: 100px;
    height:100px;
    background-color:#ffff00;
    border:1px solid #000;
    border-radius:20px;
}

圆形边框，设置border-radius大于等于0.5倍的正方形的宽高，如图2
#test{
    width: 100px;
    height:100px;
    background-color:#ffff00;
    border:1px solid #000;
    border-radius:50px;
}

边角不相等，如图3
#test{
    width: 100px;
    height:100px;
    background-color:#ffff00;
    border:1px solid #000;
    border-radius:40px 20px;//表示左上和右下使用同一个值（前一个），右上角和左下角使用第二个值。
}

图一、    图二、图三、

四个边角都不同的时候和四个边角的不一样方向的也不同的时候。

以下，如图4
<div id = "test"></div>
<style type="text/css">
#test{
    width: 100px;
    height:100px;
    background-color:#ffff00;
    border:1px solid #000;
    border-radius:40px 30px 20px 10px;/*水平与垂直的大小相等，依次是左上，右上，右下，左下*/
}
</style>

以下，如图5
<div id = "test"></div>
<style type="text/css">
#test{
    width: 100px;
    height:100px;
    background-color:#ffff00;
    border:1px solid #000;
    /*第一组表示水平半径，第二组表示垂直半径*/
    border-radius:40px 30px 50px 10px / 15px 25px 35px 45px;
}
</style>

图四、 图五、

设置单个角的弧度

border-top-left-radius: 50px;

图六、

半圆 

<div id="circle"></div>
<style type="text/css">
    #circle{
    width: 200px;
    height: 100px;
    background: #ffff00;
    border-radius: 100px 100px 0 0;
}
</style>

五、结合起来使用的效果

效果1
<div id = "test"></div>
<style type="text/css">
#test{
    width:0;
    height:0;
    border:100px solid gray;
    border-radius:100px;
    border-right-color:#fff;
}
</style>

效果2
#test{
    height:100px;
    width:200px;
    background: red;
    border-radius:100px/50px;
}

效果3
<div id = "test"></div>
<style type="text/css">
#test{
    height:100px;
    width:100px;
    border-radius:90px;/*此时，这个半径应该以边框的外边来计算，因此此时的宽高应该是180px*/
    border-top: 40px solid #ff00ff;
    border-right: 40px solid #ff0000;
    border-left: 40px solid #00ff00;
    border-bottom: 40px solid #00ffff;
}
</style>

/*效果4，放大镜图标*/
<div id="circle"></div>
<style type="text/css">
    #circle{
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border: 5px solid #333;
        position: relative;
    } #circle::after {
        content: '';
        display: block;
        width: 8px;
        height: 60px;
        border-radius: 5px;
        background: #333;
        position: absolute;
        right: -22px;
        top: 38px;
        transform: rotate(-45deg);
    }
</style>

六、attr和content

好比咱们要实现一个悬浮提示的功能。传统方法，使用title属性就能实现，可是如今咱们要更美观，能够使用css3提供的attr：可以在css中获取到元素的某个属性值，而后插入到伪元素的content中去。 

<div id = "attr" data-title="hello, world">hello...</div>
<style type="text/css">
    #attr{
        margin: 200px 0 0 200px;/*只是为了便于观察*/
        position: relative;
    }
    #attr:hover::after { content: attr(data-title); /*取到data-title属性的值*/
        display: inline-block;
        padding: 10px 14px;
        border: 1px solid #ddd;
        border-radius: 5px;
        position: absolute;
        top: -50px;
        left: -30px;
    }
</style>

 

七、radial-gradient

属性渐变

div.chrome {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    box-shadow: 0 0 4px #999, 0 0 2px #ddd inset;
    background: radial-gradient(circle, #4FACF5 0, #2196F3 28%, transparent 28%),
    radial-gradient(circle, #fff 33%, transparent 33%),
    linear-gradient(-50deg, #FFEB3B 34%, transparent 34%),
    linear-gradient(60deg, #4CAF50 33%, transparent 33%),
    linear-gradient(180deg, #FF756B 0, #F44336 30%, transparent 30%),
    linear-gradient(-120deg, #FFEB3B 40%, transparent 40%),
    linear-gradient(-60deg, #FFEB3B 30%, transparent 30%),
    linear-gradient(0deg, #4CAF50 45%, transparent 45%),
    linear-gradient(60deg, #4CAF50 30%, transparent 30%),
    linear-gradient(120deg, #F44336 50%, transparent 50%),
    linear-gradient(180deg, #F44336 30%, transparent 30%);
}