【前端开发】CSS 开发效率的必备片段-追梦人

在前端开发中常用的CSS代码

清除浮动

         .clearfix:after { 
               content: &quot;&#92;&#48;0A0&quot;; 
               display: block; 
               visibility: hidden;
               width: 0; height: 0; 
               clear: both;
               font-size: 0; 
               line-height: 0; 
               overflow: hidden; 
            } 
         .clearfix {
               zoom: 1;
           }

.clearfix:after {

content: "\00A0";

display: block;

visibility: hidden;

width: 0; height: 0;

clear: both;

font-size: 0;

line-height: 0;

overflow: hidden;

}

.clearfix {

zoom: 1;

}

垂直水平居中

// 绝对定位方式且已知宽高
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -3em;
    margin-left: -7em;
    width: 14em;
    height: 6em;

// 绝对定位 ＋ 未知宽高 ＋ translate
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
//需要补充浏览器前缀

// flex 轻松搞定水平垂直居中(未知宽高)
    display: flex;
    align-items: center;
    justify-content: center;

// 绝对定位方式且已知宽高

position: absolute;

top: 50%;

left: 50%;

margin-top: -3em;

margin-left: -7em;

width: 14em;

height: 6em;

// 绝对定位＋未知宽高＋ translate

position: absolute;

left: 50%;

top: 50%;

transform: translate(-50%, -50%);

//需要补充浏览器前缀

// flex 轻松搞定水平垂直居中(未知宽高)

display: flex;

align-items: center;

justify-content: center;

文本末尾添加省略号

// 宽度固定，适合单行显示...
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

// 宽度不固定，适合多行以及移动端显示
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;

// 宽度固定，适合单行显示...

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

// 宽度不固定，适合多行以及移动端显示

overflow: hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp: 3;

-webkit-box-orient: vertical;

制造文本的模糊效果

    color: transparent;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);

1 2	color: transparent; text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);

动画实现简洁 loading 效果

.loading:after {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    content: &quot;\2026&quot;;
    -webkit-animation: ellipsis 2s infinite;
}

// 动画部分
@-webkit-keyframes ellipsis {
    from {
        width: 2px;
    }
    to {
        width: 15px;
    }
 }

.loading:after {

display: inline-block;

overflow: hidden;

vertical-align: bottom;

content: "\2026";

-webkit-animation: ellipsis 2s infinite;

}

// 动画部分

@-webkit-keyframes ellipsis {

from {

width: 2px;

}

to {

width: 15px;

}

自定义文本选中样式

// 注意只能修改这两个属性 字体颜色 选中背景颜色
element::selection {
        color: green;
        background-color: pink;
    }
element::-moz-selection {
        color: green;
        background-color: pink;
    }

// 注意只能修改这两个属性字体颜色选中背景颜色

element::selection {

color: green;

background-color: pink;

}

element::-moz-selection {

color: green;

background-color: pink;

}

顶角贴纸效果

&lt;div class=&quot;wrap&quot;&gt;

&amp;nbsp;

&lt;div class=&quot;ribbon&quot;&gt;&amp;lt; href=&quot;#&quot;&amp;gt;Fork me on GitHub&lt;/div&gt;

&amp;nbsp;

&lt;/div&gt;

&nbsp;

<div class="ribbon">&lt; href="#"&gt;Fork me on GitHub</div>

&nbsp;

</div>

/* 外层容器几本设置 */
.wrap {
        width: 160px;
        height: 160px; 
        overflow: hidden;
        position: relative;
        background-color: #f3f3f3;
    }
.ribbon {
        background-color: #a00;
        overflow: hidden;
        white-space: nowrap;
        position: absolute;
    /* shadom */
        -webkit-box-shadow: 0 0 10px #888;
        -moz-box-shadow: 0 0 10px #888;
        box-shadow: 0 0 10px #888;
    /* rotate */
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
    /* position */
        left: -50px;
        top: 40px;
} 
.ribbon a{
        border: 1px solid #faa; 
        color: #fff;
        display: block;
        font: bold 81.25% &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif;
        margin: 1px 0;
        padding: 10px 50px;
        text-align: center;
        text-decoration: none;
    /* shadow */
        text-shadow: 0 0 5px #444;
    }

/* 外层容器几本设置 */

.wrap {

width: 160px;

height: 160px;

overflow: hidden;

position: relative;

background-color: #f3f3f3;

}

.ribbon {

background-color: #a00;

overflow: hidden;

white-space: nowrap;

position: absolute;

/* shadom */

-webkit-box-shadow: 0 0 10px #888;

-moz-box-shadow: 0 0 10px #888;

box-shadow: 0 0 10px #888;

/* rotate */

-webkit-transform: rotate(-45deg);

-moz-transform: rotate(-45deg);

-ms-transform: rotate(-45deg);

-o-transform: rotate(-45deg);

transform: rotate(-45deg);

/* position */

left: -50px;

top: 40px;

}

.ribbon a{

border: 1px solid #faa;

color: #fff;

display: block;

font: bold 81.25% "Helvetica Neue", Helvetica, Arial, sans-serif;

margin: 1px 0;

padding: 10px 50px;

text-align: center;

text-decoration: none;

/* shadow */

text-shadow: 0 0 5px #444;

}

input 占位符

input::-webkit-input-placeholder {
    color: green;
    background-color: #f9f7f7;
    font-size: 14px;
}
input::-moz-input-placeholder {
    color: green;
    background-color: #f9f7f7;
    font-size: 14px;
}
input::-ms-input-placeholder {
    color: green;
    background-color: #f9f7f7;
    font-size: 14px;
}

input::-webkit-input-placeholder {

color: green;

background-color: #f9f7f7;

font-size: 14px;

}

input::-moz-input-placeholder {

color: green;

background-color: #f9f7f7;

font-size: 14px;

}

input::-ms-input-placeholder {

color: green;

background-color: #f9f7f7;

font-size: 14px;

}

移动端可点击元素去处默认边框

-webkit-tap-highlight-color: rgba(255, 255, 255, 0);

1	-webkit-tap-highlight-color: rgba(255, 255, 255, 0);

首字下沉

element:first-letter {
    float: left;
    color: green;
    font-size: 30px;
}

element:first-letter {

float: left;

color: green;

font-size: 30px;

}

小三角

.triangle {
    /* 基础样式 */
    border: solid 10px transparent;
}
/*下*/
.triangle.bottom {
    border-top-color: green;
}
/*上*/
.triangle.top {
    border-bottom-color: green;
}
/*左*/
.triangle.top {
    border-right-color: green;
}
/*右*/
.triangle.top {
    border-left-color: green;
}

.triangle {

/* 基础样式 */

border: solid 10px transparent;

}

/*下*/

.triangle.bottom {

border-top-color: green;

}

/*上*/

.triangle.top {

border-bottom-color: green;

}

/*左*/

.triangle.top {

border-right-color: green;

}

/*右*/

.triangle.top {

border-left-color: green;

}

鼠标手型

a[href],
input[type=&quot;submit&quot;],
input[type=&quot;image&quot;],
input[type=&quot;button&quot;],
label[for],
select,
button {
cursor: pointer;
}

a[href],

input[type="submit"],

input[type="image"],

input[type="button"],

label[for],

select,

button {

cursor: pointer;

}

屏蔽 Webkit 移动浏览器中元素高亮效果

-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

-webkit-user-select: none;

-khtml-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

移除常用标签的浏览器默认的 margin 和 padding

body,p,h1,h2,h3,h4,h5,h6,dl,dd,ul,ol,th,td,button,figure,input,textarea,form {
    margin: 0;
    padding: 0;
}

body,p,h1,h2,h3,h4,h5,h6,dl,dd,ul,ol,th,td,button,figure,input,textarea,form {

margin: 0;

padding: 0;

}

统一 input、select、textarea 宽度

select,textarea {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

table {
    /*table 相邻单元格的边框间的距离设置为 0*/
    border-spacing: 0;
    /*默认情况下给 tr 设置 border 没有效果，如果 table 设置了边框为合并模式：「border-collapse: collapse;」就可以了*/
    border-collapse: collapse;
}

select,textarea {

-webkit-box-sizing: content-box;

-moz-box-sizing: content-box;

box-sizing: content-box;

}

table {

/*table 相邻单元格的边框间的距离设置为 0*/

border-spacing: 0;

/*默认情况下给 tr 设置 border 没有效果，如果 table 设置了边框为合并模式：「border-collapse: collapse;」就可以了*/

border-collapse: collapse;

}

移除浏览器部分元素的默认边框

img,input,button,textarea {
border: none;
    -webkit-appearance: none;
}

input {
    /*由于 input 默认不继承父元素的居中样式，所以设置：「text-align: inherit」*/
    text-align: inherit;
}

textarea {
    /*textarea 默认不可以放缩*/
    resize: none;
}

img,input,button,textarea {

border: none;

-webkit-appearance: none;

}

input {

/*由于 input 默认不继承父元素的居中样式，所以设置：「text-align: inherit」*/

text-align: inherit;

}

textarea {

/*textarea 默认不可以放缩*/

resize: none;

}

取消元素 outline 样式

a,h1,h2,h3,h4,h5,h6,input,select,button,option,textarea,optgroup {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    font-style: inherit;
    line-height: inherit;
    color: inherit;
    outline: none;
}

a,h1,h2,h3,h4,h5,h6,input,select,button,option,textarea,optgroup {

font-family: inherit;

font-size: inherit;

font-weight: inherit;

font-style: inherit;

line-height: inherit;

color: inherit;

outline: none;

}

取消超链接元素的默认文字装饰

a {
    text-decoration: none;
}

ol,ul {
    /*开发中 UI 设计的列表都是和原生的样式差太多，所以直接给取消 ol，ul 默认列表样式*/
    list-style: none;
}

button,input[type=&quot;submit&quot;],input[type=&quot;button&quot;] {
    /*鼠标经过是「小手」形状表示可点击*/
    cursor: pointer;
}

input::-moz-focus-inner {
    /*取消火狐浏览器部分版本 input 聚焦时默认的「padding、border」*/
    padding: 0;
    border: 0;
}

a {

text-decoration: none;

}

ol,ul {

/*开发中 UI 设计的列表都是和原生的样式差太多，所以直接给取消 ol，ul 默认列表样式*/

list-style: none;

}

button,input[type="submit"],input[type="button"] {

/*鼠标经过是「小手」形状表示可点击*/

cursor: pointer;

}

input::-moz-focus-inner {

/*取消火狐浏览器部分版本 input 聚焦时默认的「padding、border」*/

padding: 0;

border: 0;

}

取消部分浏览器数字输入控件的操作按钮

input[type=&quot;number&quot;] {
    -moz-appearance: textfield;
}

input[type=&quot;number&quot;]::-webkit-inner-spin-button,input[type=&quot;number&quot;]::-webkit-outer-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

input[type="number"] {

-moz-appearance: textfield;

}

input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button {

margin: 0;

-webkit-appearance: none;

}

输入控件 placeholder 色设置 #999

input::-webkit-input-placeholder,textarea::-webkit-input-placeholder {
    color: #999;
}

input:-moz-placeholder,textarea:-moz-placeholder {
    color: #999;
}

input::-moz-placeholder,textarea::-moz-placeholder {
    color: #999;
}

input:-ms-input-placeholder,textarea:-ms-input-placeholder {
    color: #999;
}

template {
    /*由于部分浏览 template 会显示出来，所以要隐*/
    display: none;
}

input::-webkit-input-placeholder,textarea::-webkit-input-placeholder {

color: #999;

}

input:-moz-placeholder,textarea:-moz-placeholder {

color: #999;

}

input::-moz-placeholder,textarea::-moz-placeholder {

color: #999;

}

input:-ms-input-placeholder,textarea:-ms-input-placeholder {

color: #999;

}

template {

/*由于部分浏览 template 会显示出来，所以要隐*/

display: none;

}

position: fixed 的缩写

.pf {
    position: fixed;
    /*chrome 内核 浏览器 position: fixed 防止抖动*/
    -webkit-transform: translateZ(0);
}

.pf {

position: fixed;

/*chrome 内核浏览器 position: fixed 防止抖动*/

-webkit-transform: translateZ(0);

}

利用绝对定位宽高拉升原理，中心居中元素

.middle {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

.middle {

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

margin: auto;

}

利用相对定位于 CSS3 使元素垂直居中

.v-middle {
    position: relative;
    top: 50%;
    -webkit-transform: -webkit-translateY(-50%);
    -moz-transform: -moz-translateY(-50%);
    -o-transform: -o-translateY(-50%);
    transform: translateY(-50%);
}

.v-middle {

position: relative;

top: 50%;

-webkit-transform: -webkit-translateY(-50%);

-moz-transform: -moz-translateY(-50%);

-o-transform: -o-translateY(-50%);

transform: translateY(-50%);

}

元素计算宽高的盒子模型以 border 为外界限「bb ==> border-box」

.bb {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.bb {

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

单行文本溢出显示省略号「to ==> text-overflow」

.to {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.to {

overflow: hidden;

white-space: nowrap;

text-overflow: ellipsis;

}

初始化样式

body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td {
    margin: 0;
    padding: 0;
}
body,button,input,select,textarea {
    font: 12px/1.5 tahoma, arial, \5b8b\4f53;
}
h1,h2,h3,h4,h5,h6 {
    font-size: 100%;
}
address,cite,dfn,em,var {
    font-style: normal;
}
code,kbd,pre,samp {
    font-family: couriernew, courier, monospace;
}
small {
    font-size: 12px;
}
ul,ol {
    list-style: none;
}
a {
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
sup {
    vertical-align: text-top;
}
sub {
    vertical-align: text-bottom;
}
legend {
    color: #000;
}
fieldset,img {
    border: 0;
}
button,input,select,textarea {
    font-size: 100%;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td {

margin: 0;

padding: 0;

}

body,button,input,select,textarea {

font: 12px/1.5 tahoma, arial, \5b8b\4f53;

}

h1,h2,h3,h4,h5,h6 {

font-size: 100%;

}

address,cite,dfn,em,var {

font-style: normal;

}

code,kbd,pre,samp {

font-family: couriernew, courier, monospace;

}

small {

font-size: 12px;

}

ul,ol {

list-style: none;

}

a {

text-decoration: none;

}

a:hover {

text-decoration: underline;

}

sup {

vertical-align: text-top;

}

sub {

vertical-align: text-bottom;

}

legend {

color: #000;

}

fieldset,img {

border: 0;

}

button,input,select,textarea {

font-size: 100%;

}

table {

border-collapse: collapse;

border-spacing: 0;

}

强制换行/自动换行/强制不换行

/* 强制不换行 */
div {
    white-space: nowrap;
}

/* 自动换行 */
div {
    word-wrap: break-word;
    word-break: normal;
}

/* 强制英文单词断行 */
div {
    word-break: break-all;
}

/* 强制不换行 */

div {

white-space: nowrap;

}

/* 自动换行 */

div {

word-wrap: break-word;

word-break: normal;

}

/* 强制英文单词断行 */

div {

word-break: break-all;

}

table 边界的样式

table {
    border: 1px solid #000;
    padding: 0;
    border-collapse: collapse;
    table-layout: fixed;
    margin-top: 10px;
}
table td {
    height: 30px;
    border: 1px solid #000;
    background: #fff;
    font-size: 15px;
    padding: 3px 3px 3px 8px;
    color: #000;
    width: 160px;
}

table {

border: 1px solid #000;

padding: 0;

border-collapse: collapse;

table-layout: fixed;

margin-top: 10px;

}

table td {

height: 30px;

border: 1px solid #000;

background: #fff;

font-size: 15px;

padding: 3px 3px 3px 8px;

color: #000;

width: 160px;

}

绝对定位与 margin

/* 当我们提前知道要居中元素的长度和宽度时，可以使用这种方式 */
.container {
    position: relative;
    width: 300px;
    height: 200px;
    border: 1px solid #333333;
}
.content {
    background-color: #ccc;
    width: 160px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -80px; /* 宽度的一半 */
    margin-top: -50px; /* 高度的一半 */
}

/* 当我们提前知道要居中元素的长度和宽度时，可以使用这种方式 */

.container {

position: relative;

width: 300px;

height: 200px;

border: 1px solid #333333;

}

.content {

background-color: #ccc;

width: 160px;

height: 100px;

position: absolute;

top: 50%;

left: 50%;

margin-left: -80px; /* 宽度的一半 */

margin-top: -50px; /* 高度的一半 */

}

绝对定位与 transform

.container {
    position: relative;
    width: 300px;
    height: 200px;
    border: 1px solid #333333;
    }
    .content {
    background-color: #ccc;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    text-align: center;
    }

.container {

position: relative;

width: 300px;

height: 200px;

border: 1px solid #333333;

}

.content {

background-color: #ccc;

position: absolute;

top: 50%;

left: 50%;

transform: translate3d(-50%, -50%, 0);

text-align: center;

}

line-height

/* 
    line-height其实是行高，我们可以用行高来调整布局！
    不过这个方案有一个比较大的缺点是：文案必须是单行的，
    多行的话，设置的行高就会有问题。
 */
.container {
    width: 300px;
    height: 200px;
    border: 1px solid #333333;
    }
    .content {
    line-height: 200px;
    }

line-height其实是行高，我们可以用行高来调整布局！

不过这个方案有一个比较大的缺点是：文案必须是单行的，

多行的话，设置的行高就会有问题。

.container {

width: 300px;

height: 200px;

border: 1px solid #333333;

}

.content {

line-height: 200px;

}

table

/* 布局给容器元素设置display: table，当前元素设置display: table-cell： */
.container {
    width: 300px;
    height: 200px;
    border: 1px solid #333333;
    display: table;
}
.content {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

/* 布局给容器元素设置display: table，当前元素设置display: table-cell： */

.container {

width: 300px;

height: 200px;

border: 1px solid #333333;

display: table;

}

.content {

display: table-cell;

vertical-align: middle;

text-align: center;

}

flex 布局

/*
    我们可以给父级元素设置为display: flex，利用 flex 中的align-items和
    justify-content设置垂直方向和水平方向的居中。这种方式也不限制中间元
    素的宽度和高度。同时，flex 布局也能替换line-height方案在某些
    Android 机型中文字不居中的问题。

*/
.container {
    width: 300px;
    height: 200px;
    border: 1px solid #333333;
    display: flex;
    align-items: center;
    justify-content: center;
}
.content {
    background-color: #ccc;
    text-align: center;
}

我们可以给父级元素设置为display: flex，利用 flex 中的align-items和

justify-content设置垂直方向和水平方向的居中。这种方式也不限制中间元

素的宽度和高度。同时，flex 布局也能替换line-height方案在某些

Android 机型中文字不居中的问题。

.container {

width: 300px;

height: 200px;

border: 1px solid #333333;

display: flex;

align-items: center;

justify-content: center;

}

.content {

background-color: #ccc;

text-align: center;

}

图片上下左右居中

/* 一种常用的方式是把外层的 div 设置为 table-cell；然后让内部的元素上下左右居中。
当然也还有一种方式，就是把 img 当做 div，参考 6 中的代码进行设置。 */

&lt;div class=&quot;content&quot;&gt;
    &lt;img src=&quot;./4.jpg&quot; alt=&quot;img&quot; /&gt;
&lt;/div&gt;

/* 一种常用的方式是把外层的 div 设置为 table-cell；然后让内部的元素上下左右居中。

当然也还有一种方式，就是把 img 当做 div，参考 6 中的代码进行设置。 */

</div>

/* 一种常用的方式是把外层的 div 设置为 table-cell；然后让内部的元素上下左右居中。
当然也还有一种方式，就是把 img 当做 div，参考 6 中的代码进行设置。 */

.content {
    width: 400px;
    height: 400px;
    border: 1px solid #ccc;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}

/* 一种常用的方式是把外层的 div 设置为 table-cell；然后让内部的元素上下左右居中。

当然也还有一种方式，就是把 img 当做 div，参考 6 中的代码进行设置。 */

.content {

width: 400px;

height: 400px;

border: 1px solid #ccc;

text-align: center;

display: table-cell;

vertical-align: middle;

}

标题两边的小横杠

我们经常会遇到这样的 UI 需求，就是标题两边有两个小横杠，之前是怎么实现的呢？
比如用个border-top属性，然后再把中间的文字进行绝对定位，同时给这个文字一个背景颜色，把中间的这部分盖住。

/* 
&lt;div class=&quot;title&quot;&gt;标题&lt;/div&gt;

 */
title {
    color: #e1767c;
    font-size: 0.3rem;
    position: relative;

    &amp;:before,&amp;:after {
        content: &quot;&quot;;
        position: absolute;
        display: block;
        left: 50%;
        top: 50%;
        -webkit-transform: translate3d(-50%, -50%, 0);
        transform: translate3d(-50%, -50%, 0);
        border-top: 0.02rem solid #e1767c;
        width: 0.4rem;
    }
    &amp;:before {
        margin-left: -1.2rem;
    }
    &amp;:after {
        margin-left: 1.2rem;
    }
}

title {

color: #e1767c;

font-size: 0.3rem;

position: relative;

&:before,&:after {

content: "";

position: absolute;

display: block;

left: 50%;

top: 50%;

-webkit-transform: translate3d(-50%, -50%, 0);

transform: translate3d(-50%, -50%, 0);

border-top: 0.02rem solid #e1767c;

width: 0.4rem;

}

&:before {

margin-left: -1.2rem;

}

&:after {

margin-left: 1.2rem;

}

用 border 属性绘制元素

border 除了作为简单的绘制边框以外，还可以绘制三角形，梯形，星形等任意的多边形

/*

&lt;div class=&quot;triangle1&quot;&gt;&lt;/div&gt;

&lt;div class=&quot;triangle2&quot;&gt;&lt;/div&gt;

&lt;div class=&quot;trapezoid&quot;&gt;&lt;/div&gt;

 */
.triangle1 {
    /*锐角三角形*/
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-bottom: 100px solid #249ff1;
    border-left: 30px solid transparent;
    border-right: 100px solid transparent;
}
.triangle2 {
    /*直角三角形*/
    width: 0;
    height: 0;
    border-top: 80px solid transparent;
    border-bottom: 80px solid #ff5b01;
    border-left: 50px solid #ff5b01;
    border-right: 50px solid transparent;
}
.trapezoid {
    /*梯形*/
    width: 0;
    height: 0;
    border-top: none;
    border-right: 80px solid transparent;
    border-bottom: 60px solid #13dbed;
    border-left: 80px solid #13dbed;
}

/* 用 border-radius 绘制元素 */
/* border-radius主要用于绘制圆点、圆形、椭圆、圆角矩形等形状，以下为简单绘制的两个图形。 */

/*

&lt;div class=&quot;circle&quot;&gt;&lt;/div&gt;

&lt;div class=&quot;ellipse&quot;&gt;
&lt;div&gt;&lt;/div&gt;
&lt;/div&gt;

*/
.circle,
.ellipse {
    width: 100px;
    height: 100px;
    background: #249ff1;
    border-radius: 50%;
}
.ellipse {
    width: 150px;
    background: #ff9e01;
}

.triangle1 {

/*锐角三角形*/

width: 0;

height: 0;

border-top: 50px solid transparent;

border-bottom: 100px solid #249ff1;

border-left: 30px solid transparent;

border-right: 100px solid transparent;

}

.triangle2 {

/*直角三角形*/

width: 0;

height: 0;

border-top: 80px solid transparent;

border-bottom: 80px solid #ff5b01;

border-left: 50px solid #ff5b01;

border-right: 50px solid transparent;

}

.trapezoid {

/*梯形*/

width: 0;

height: 0;

border-top: none;

border-right: 80px solid transparent;

border-bottom: 60px solid #13dbed;

border-left: 80px solid #13dbed;

}

/* 用 border-radius 绘制元素 */

/* border-radius主要用于绘制圆点、圆形、椭圆、圆角矩形等形状，以下为简单绘制的两个图形。 */

</div>

.circle,

.ellipse {

width: 100px;

height: 100px;

background: #249ff1;

border-radius: 50%;

}

.ellipse {

width: 150px;

background: #ff9e01;

}

用 box-shadow 绘制元素

对于box-shadow，其完整的声明为box-shadow: h-shadow v-shadow blur spread color inset,各个值表示的意义分别为：s 水平方向的偏移，垂直方向的便宜，模糊的距离（羽化值），阴影的大小（不设置或为 0 时阴影与主体的大小一致），阴影的颜色和是否使用内阴影。实际应用时可以接收 3-6 个值，对应分别如下：

3 个值： h-shadow v-shadow color

4 个值： h-shadow v-shadow blur color

5 个值： h-shadow v-shadow blur spread color

6 个值： h-shadow v-shadow blur spread color inset

同时，border-shadow接受由多个以上各种值组成的以逗号分隔的值，通过这一特性，我们可以实现如多重边框的等效果。以下我们用该属性来实现一个单标签且不借助伪元素的添加图标和代表目标的的图标。

&lt;div class=&quot;plus&quot;&gt;&lt;/div&gt;

&lt;div class=&quot;target&quot;&gt;&lt;/div&gt;

.plus {
    width: 30px;
    height: 30px;
    margin-left: 50px; /*由于box-shadow不占空间，常常需要添加margin来校正位置*/
    background: #000;
    box-shadow: 0 -30px 0 red, 0 30px 0 red, -30px 0 0 red, 30px 0 0 red;
}
.target {
    width: 30px;
    height: 30px;
    background: red;
    border-radius: 50%;
    margin-left: 50px;
    box-shadow: 0 0 0 10px #fff, 0 0 0 20px red, 0 0 0 30px #fff, 0 0 0 40px red;
}

.plus {

width: 30px;

height: 30px;

margin-left: 50px; /*由于box-shadow不占空间，常常需要添加margin来校正位置*/

background: #000;

box-shadow: 0 -30px 0 red, 0 30px 0 red, -30px 0 0 red, 30px 0 0 red;

}

.target {

width: 30px;

height: 30px;

background: red;

border-radius: 50%;

margin-left: 50px;

box-shadow: 0 0 0 10px #fff, 0 0 0 20px red, 0 0 0 30px #fff, 0 0 0 40px red;

}

使用 CSS渐变属性

渐变来绘制图标CSS3 的渐变属性十分强大，理论上通过渐变可以绘制出任何的图形，渐变的特性和使用足足可以写一篇长文，以下为一个例子

&lt;div class=&quot;gradient&quot;&gt;&lt;/div&gt;

.gradient {
    position: relative;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background-color: silver;
    background-image: linear-gradient(335deg, #b00 23px, transparent 23px),
        linear-gradient(155deg, #d00 23px, transparent 23px), linear-gradient(
        335deg,
        #b00 23px,
        transparent 23px
        ), linear-gradient(155deg, #d00 23px, transparent 23px);
    background-size: 58px 58px;
    background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;
}
/* 杯子 */
.cup {
    display: inline-block;
    width: 0.9em;
    height: 0.4em;
    border: 0.25em solid;
    border-bottom: 1.1em solid;
    border-radius: 0 0 0.25em 0.25em;
}
cup:before {
    position: absolute;
    right: -0.6em;
    top: 0;
    width: 0.3em;
    height: 0.8em;
    border: 0.25em solid;
    border-left: none;
    border-radius: 0 0.25em 0.25em 0;
    content: &quot;&quot;;
}
心形
.heart {
    display: inline-block;
    margin-top: 1.5em;
    width: 50px;
    height: 50px;
    background: green;
}
.heart:before,.heart:after {
    position: absolute;
    width: 1em;
    height: 1.6em;
    background: #000;
    border-radius: 50% 50% 0 0;
    content: &quot;&quot;;
    bottom: 0;
}
.heart:before {
    -webkit-transform: rotate(45deg);
    -webkit-transform-origin: 100% 100%;
    right: 0;
    background: red;
    opacity: 0.5;
    z-index: 5;
}
.:after {
    -webkit-transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
    left: 0;
    opacity: 0.8;
}
/* 相机 */
.camera {
    display: inline-block;
    border-style: solid;
    border-width: 0.65em 0.9em;
    border-radius: 0.1em;
}
.camera:before {
    position: absolute;
    top: -0.3em;
    left: -0.3em;
    width: 0.4em;
    height: 0.4em;
    border-radius: 50%;
    border: 0.1em solid #fff;
    box-shadow: 0 0 0 0.08em, 0 0 0 0.16em #fff;
    content: &quot;&quot;;
}
.camera:after {
    position: absolute;
    top: -0.5em;
    left: 0.5em;
    width: 0.2em;
    border-top: 0.125em solid #fff;
    content: &quot;&quot;;
}
/* 月亮 */
.moon {
    display: inline-block;
    height: 1.5em;
    width: 1.5em;
    box-shadow: inset -0.4em 0 0;
    border-radius: 2em;
    transform: rotate(20deg);
}

100

101

102

103

.gradient {

position: relative;

width: 300px;

height: 300px;

border-radius: 50%;

background-color: silver;

linear-gradient(155deg, #d00 23px, transparent 23px), linear-gradient(

335deg,

#b00 23px,

transparent 23px

), linear-gradient(155deg, #d00 23px, transparent 23px);

background-size: 58px 58px;

background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;

}

/* 杯子 */

.cup {

display: inline-block;

width: 0.9em;

height: 0.4em;

border: 0.25em solid;

border-bottom: 1.1em solid;

border-radius: 0 0 0.25em 0.25em;

}

cup:before {

position: absolute;

right: -0.6em;

top: 0;

width: 0.3em;

height: 0.8em;

border: 0.25em solid;

border-left: none;

border-radius: 0 0.25em 0.25em 0;

content: "";

}

心形

.heart {

display: inline-block;

margin-top: 1.5em;

width: 50px;

height: 50px;

background: green;

}

.heart:before,.heart:after {

position: absolute;

width: 1em;

height: 1.6em;

background: #000;

border-radius: 50% 50% 0 0;

content: "";

bottom: 0;

}

.heart:before {

-webkit-transform: rotate(45deg);

-webkit-transform-origin: 100% 100%;

right: 0;

background: red;

opacity: 0.5;

z-index: 5;

}

.:after {

-webkit-transform: rotate(-45deg);

-webkit-transform-origin: 0 100%;

left: 0;

opacity: 0.8;

}

/* 相机 */

.camera {

display: inline-block;

border-style: solid;

border-width: 0.65em 0.9em;

border-radius: 0.1em;

}

.camera:before {

position: absolute;

top: -0.3em;

left: -0.3em;

width: 0.4em;

height: 0.4em;

border-radius: 50%;

border: 0.1em solid #fff;

box-shadow: 0 0 0 0.08em, 0 0 0 0.16em #fff;

content: "";

}

.camera:after {

position: absolute;

top: -0.5em;

left: 0.5em;

width: 0.2em;

border-top: 0.125em solid #fff;

content: "";

}

/* 月亮 */

.moon {

display: inline-block;

height: 1.5em;

width: 1.5em;

box-shadow: inset -0.4em 0 0;

border-radius: 2em;

transform: rotate(20deg);

}

浮动类

常规浮动 list 浮动 image 浮动

.float-left {
    float: left;
}
.float-right {
    float: right;
}
.float-li li,/*定义到li父元素或祖先元素上*/ li.float-li {
    float: left;
}
.float-img img,/*定义到img父元素或祖先元素上*/ img.float-li {
    float: left;
}
.float-span span,/*定义到span父元素或祖先元素上*/ span.float-span {
    float: right;
}

.float-left {

float: left;

}

.float-right {

float: right;

}

.float-li li,/*定义到li父元素或祖先元素上*/ li.float-li {

float: left;

}

.float-img img,/*定义到img父元素或祖先元素上*/ img.float-li {

float: left;

}

.float-span span,/*定义到span父元素或祖先元素上*/ span.float-span {

float: right;

}