所以决定趁此机会好好研究一下这个既熟悉又陌

作者: 前端  发布:2019-11-05

用 CSS3 绘制你须要的几何图形

2016/08/12 · CSS

原稿出处: 流转的散文家   

1、圆形

示例:图片 1

思路:给其余圆柱产生分设置三个足足大的 border-radius ,就足以把它形成贰个圆形.代码如下:

html:

XHTML

<div class="size example1"></div>

1
<div class="size example1"></div>

css:

CSS

.size{ width:200px; height: 200px; background: #8BC34A; } .example1{ border-radius:100px; }

1
2
3
4
5
6
7
8
.size{
    width:200px;
    height: 200px;
    background: #8BC34A;
}
.example1{
    border-radius:100px;
}

2、自适应椭圆

图片 2

思路:border-radius 那个性子还也有另外一个无人问津的实质,它不但能够选取长度值,还足以担任百分比率。这些百分比值会基于成分的尺码实行深入解析.这象征雷同的比例可能会精兵简政出分裂的等级次序和垂直半径。代码如下:

html:

XHTML

<div class="example3"></div>

1
<div class="example3"></div>

css:

CSS

.example3{ width:200px; height: 150px; border-radius:50%; background: #8BC34A; }

1
2
3
4
5
6
.example3{
    width:200px;
    height: 150px;
    border-radius:50%;
    background: #8BC34A;
}

3、自适应的半椭圆:沿横轴劈开的半椭圆

图片 3

思路:border-radius 的语法比大家想像中灵活得多。你恐怕会惊讶地窥见 border-radius 原本是四个简写属性。第风姿罗曼蒂克种艺术正是接收它所对应的相继展开式属性:

  • „ border-top-left-radius
  • „ border-top-right-radius
  • „ border-bottom-right-radius
  • „ border-bottom-left-radius

咱俩仍是可以为具备八个角提供完全两样的水准和垂直半径,方法是在斜杠前点名 1~4 个值,在斜杠后钦定别的 1~4 个值。举个例子来讲,当 border-radius 的值为10px / 5px 20px 时,其功用一定于 10px 10px 10px 10px / 5px 20px 5px 20px 。

为 border-radius 属性分别钦赐4、3、2、1 个由空格分隔的值时,这几个值是以如此的规律分配到多少个角上的(请小心,对椭圆半径来讲,斜杠前和斜杠后最多能够各有四个参数,这两组值是以近似的法子分配到各类角的卡塔 尔(阿拉伯语:قطر‎

图片 4

代码如下:自适应的半椭圆:沿横轴劈开的半椭圆

html:

XHTML

<div class="example4"></div>

1
<div class="example4"></div>

css:

CSS

.example4{ width:200px; height: 150px; border-radius: 50% / 100% 100% 0 0; background: #8BC34A; }

1
2
3
4
5
6
.example4{
    width:200px;
    height: 150px;
    border-radius: 50% / 100% 100% 0 0;
    background: #8BC34A;
}

4、自适应的半椭圆:沿纵轴劈开的半椭圆

图片 5

思路:自适应的半椭圆:沿纵轴劈开的半椭圆

代码如下:

html:

XHTML

<div class="example5"></div>

1
<div class="example5"></div>

css:

CSS

.example5{ width:200px; height: 150px; border-radius: 100% 0 0 100% / 50%; background: #8BC34A; }

1
2
3
4
5
6
.example5{
    width:200px;
    height: 150px;
    border-radius: 100% 0 0 100% / 50%;
    background: #8BC34A;
}

5、四分三椭圆

思路:此中一个角的程度和垂直半径值都需假若百分百,而别的多少个角都不能够设为圆角。

图片 6

代码如下:

html:

XHTML

<div class="example6"></div>

1
<div class="example6"></div>

css:

CSS

.example6{ width:160px; height: 100px; border-radius: 100% 0 0 0; background: #8BC34A; }

1
2
3
4
5
6
.example6{
    width:160px;
    height: 100px;
    border-radius: 100% 0 0 0;
    background: #8BC34A;
}

 6、用椭圆绘制opera浏览器的logo

图片 7

思路:绘制opera浏览器的logo,深入分析起来轻松,就唯有多个图层,叁个是最尾部的扁圆形,一个是最上边那层的椭圆。先明显一下最尾巴部分的扁圆形宽高,量了一晃,水平大幅度为258px,垂直中度为275px,因为其是叁个对称的椭圆,没有偏斜度,故4个角均为水平半径为258px,垂直半径为275px的4个极其椭圆,用同样的艺术规定最中间的扁圆形的半径,因而,多个角均为水平半径120px,垂直半径为229px的扁圆形,代码如下:

html:

XHTML

<div class="opera"> <div class="opera-top"></div> </div>

1
2
3
<div class="opera">
        <div class="opera-top"></div>
</div>

css:

CSS

.opera{ width:258px; height: 275px; background: #F22629; border-radius:258px 258px 258px 258px /275px 275px 275px 275px; position: relative; } .opera-top{ width: 112px; height: 231px; background: #FFFFFF; border-radius: 112px 112px 112px 112px/231px 231px 231px 231px; position: absolute; left: 50%; right: 50%; top: 50%; bottom: 50%; margin-left: -56px; margin-top: -115px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.opera{
    width:258px;
    height: 275px;
    background: #F22629;
    border-radius:258px 258px 258px 258px /275px 275px 275px 275px;
    position: relative;
}
.opera-top{
    width: 112px;
    height: 231px;
    background: #FFFFFF;
    border-radius: 112px 112px 112px 112px/231px 231px 231px 231px;
    position: absolute;
    left: 50%;
    right: 50%;
    top: 50%;
    bottom: 50%;
    margin-left: -56px;
    margin-top: -115px;
}

 7、平行四边形

图片 8

思路:伪成分方案:是把装有样式(背景、边框等卡塔 尔(英语:State of Qatar)应用到伪成分上,然后再对 伪成分举办变形。因为大家的剧情并不是含有在伪成分里的,所以内容并不会遭到变形的震慑。代码如下:

html:

XHTML

<div class="button">transform:skew()</div>

1
<div class="button">transform:skew()</div>

css:

CSS

.button { width:200px; height: 100px; position: relative; left: 100px; line-height: 100px; text-align: center; font-weight: bolder; } .button::before { content: ''; /* 用伪成分来生成一个矩形 */   position: absolute;   top: 0; right: 0; bottom: 0; left: 0;   z-index: -1;   transform: skew(45deg);   background: #8BC34A; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.button {
    width:200px;
    height: 100px;
    position: relative;
    left: 100px;
    line-height: 100px;
    text-align: center;
    font-weight: bolder;
}
.button::before {
   content: ''; /* 用伪元素来生成一个矩形 */
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -1;
  transform: skew(45deg);
  background: #8BC34A;
}

技能总计:那么些技巧不止对 skew() 变形来讲很有用,还适用于此外任何变形样式,当我们想变形二个成分而不想变形它的源委时就足以用到它。

8、菱形

图片 9

思路:大家把那个本事针对 rotate() 变形样式稍微调节一下,再用到贰个星型成分上,就能够相当的轻巧地获取多少个菱形。代码如下:

html:

XHTML

<div class="example1">transform:rotate()</div>

1
<div class="example1">transform:rotate()</div>

css:

CSS

.example1 { width:140px; height: 140px; position: relative; left: 100px; line-height: 100px; text-align: center; font-weight: bolder; } .example1::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; transform: rotate(45deg); background: #8BC34A; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.example1 {
    width:140px;
    height: 140px;
    position: relative;
    left: 100px;
    line-height: 100px;
    text-align: center;
    font-weight: bolder;
}
.example1::before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: -1;
    transform: rotate(45deg);
    background: #8BC34A;
}

本领总计:这一个技艺的关键在于,我们接纳伪成分以致定位属性发生了一个四方, 然后对伪元素设置样式,并将其放置在其宿主成分的下层。这种思路相近可以利用在此外场景中,进而拿到琳琅满指标效果。

9、菱形图片

图片 10

思路:基于变形的方案,
小编们想让图片的宽度与容器的对角线相等,实际不是与边长相等。供给采用勾股定理,这几个定律告诉大家,四个长方形的对角线长度等于它的边长乘以根号2,约等于1.414 213 562  。由此,把 max-width 的值设置为根号2加倍百分之百相当于 414.421 356 2% 是很有理的,恐怕把那个值向上取整为 142% ,因为大家不指望因为总计的舍入难题引致图片在其实呈现时稍小(但稍大是没难点的,反正大家都以在裁切图片嘛卡塔尔国

代码如下:

html:

XHTML

<div class="picture"> <img src="./imgs/7.jpg"> </div>

1
2
3
<div class="picture">
    <img src="./imgs/7.jpg">
</div>

css:

CSS

.picture { width: 200px; transform: rotate(45deg); overflow: hidden; margin: 50px; } .picture img { max-width: 100%; transform: rotate(-45deg) scale(1.42); z-index: -1; position: relative; }

1
2
3
4
5
6
7
8
9
10
11
12
.picture {
    width: 200px;
    transform: rotate(45deg);
    overflow: hidden;
    margin: 50px;
}
.picture img {
    max-width: 100%;
    transform: rotate(-45deg) scale(1.42);
    z-index: -1;
    position: relative;
}

本领总结:大家盼望图片的尺寸属性保留 百分之百 这些值,这样当浏览器不匡助变 形样式时依旧能够获取四个创建的布局。 „ 通过 scale() 变形样式来缩放图片时,是以它的为主点张开缩放的 (除非我们特别内定了 transform-origin 样式卡塔 尔(英语:State of Qatar) 。通过 width 属性 来松开图片时,只会以它的左上角为原点进行缩放,进而倒逼大家动用额外的负外边距来把图纸的职分调治回来.

10、切角功能

图片 11

思路:基于background:linear-gradient()的方案:把多个角都做出切角效果了。你须求四层渐变图案,代码如 下所示:

html:

XHTML

<div class="example2">Hey, focus! You’re supposed to be looking at my corners, not reading my text. The text is just placeholder!</div>

1
<div class="example2">Hey, focus! You’re supposed to be looking at my corners, not reading my text. The text is just placeholder!</div>

css:

CSS

.example2{ background: #8BC34A; background: linear-gradient(135deg, transparent 15px, #8BC34A 0) top left, linear-gradient(-135deg, transparent 15px, #8BC34A 0) top right, linear-gradient(-45deg, transparent 15px, #8BC34A 0) bottom right, linear-gradient(45deg, transparent 15px, #8BC34A 0) bottom left; background-size: 50% 50%; background-repeat: no-repeat; padding: 1em 1.2em; max-width: 12em; line-height: 1.5em; }

1
2
3
4
5
6
7
8
9
10
11
12
13
.example2{
    background: #8BC34A;
    background: linear-gradient(135deg, transparent 15px, #8BC34A 0) top left,
                linear-gradient(-135deg, transparent 15px, #8BC34A 0) top right,
                linear-gradient(-45deg, transparent 15px, #8BC34A 0) bottom right,
                linear-gradient(45deg, transparent 15px, #8BC34A 0) bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
    
    padding: 1em 1.2em;
    max-width: 12em;
    line-height: 1.5em;
}

11、弧形切角

图片 12

思路:上述渐变技能还或然有一个变种,能够用来创设弧形切角(超多个人也把这种 效果称为“内凹圆角” ,因为它看起来就好像圆角的反向版本卡塔 尔(阿拉伯语:قطر‎ 。唯意气风发的分歧在于,我们会用径向渐变来代替上述线性渐变,代码如下:

html:

XHTML

<div class="example3">Hey, focus! You’re supposed to be looking at my corners, not reading my text. The text is just placeholder!</div>

1
<div class="example3">Hey, focus! You’re supposed to be looking at my corners, not reading my text. The text is just placeholder!</div>

css:

CSS

.example3{ background: #8BC34A; background: radial-gradient(circle at top left, transparent 15px, #8BC34A 0) top left, radial-gradient(circle at top right, transparent 15px, #8BC34A 0) top right, radial-gradient(circle at bottom right, transparent 15px, #8BC34A 0) bottom right, radial-gradient(circle at bottom left, transparent 15px, #8BC34A 0) bottom left; background-size: 50% 50%; background-repeat: no-repeat; padding: 1em 1.2em; max-width: 12em; }

1
2
3
4
5
6
7
8
9
10
11
12
.example3{
    background: #8BC34A;
    background: radial-gradient(circle at top left, transparent 15px, #8BC34A 0) top left,
                radial-gradient(circle at top right, transparent 15px, #8BC34A 0) top right,
                radial-gradient(circle at bottom right, transparent 15px, #8BC34A 0) bottom right,
                radial-gradient(circle at bottom left, transparent 15px, #8BC34A 0) bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
    
    padding: 1em 1.2em;
    max-width: 12em;
}

 12、简单的饼图

图片 13

思路:基于 transform 的建设方案:我们将来能够经过几个 rotate() 变形属性来让那几个伪成分转起来。 假诺大家要出示出 75%的比值,大家得以钦定旋转的值为 72deg (0.2 × 360 = 72卡塔 尔(英语:State of Qatar) ,写成 .2turn 会更直观一些。你还足以看来其 他有些旋转值的景观。代码如下:

html:

XHTML

<div class="pie"></div>

1
<div class="pie"></div>

css:

CSS

.pie{ width:140px; height: 140px; background: #8BC34A; border-radius: 50%; background-image: linear-gradient(to right,transparent 50%,#655 0); } .pie::before{ content: ''; display: block; margin-left: 50%; height: 100%; border-radius: 0 100% 100% 0 / 50%; background-color: inherit; transform-origin: left; transform: rotate(.1turn);/*10%*/ transform: rotate(.2turn);/*20%*/ transform: rotate(.3turn);/*30%*/ }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.pie{
    width:140px;
    height: 140px;
    background: #8BC34A;
    border-radius: 50%;
    background-image: linear-gradient(to right,transparent 50%,#655 0);
}
.pie::before{
    content: '';
    display: block;
    margin-left: 50%;
    height: 100%;
    border-radius: 0 100% 100% 0 / 50%;
    background-color: inherit;
    transform-origin: left;
    transform: rotate(.1turn);/*10%*/
    transform: rotate(.2turn);/*20%*/
    transform: rotate(.3turn);/*30%*/
}

唤醒:在参数中规定角度。turn是圈,1turn = 360deg;其余还大概有弧度rad,2nrad = 1turn = 360deg。如,transform:rotate(2turn); //旋转两圈

图片 14

此办法呈现 0 到 二分之一 的比率时运维卓越,但倘使大家尝试展现 百分之八十的比值时(例如钦点旋转值为 .6turn 时卡塔 尔(阿拉伯语:قطر‎,会冒出难点。化解办法:使 用上述技艺的一个反向版本来贯彻那么些界定内的比率:设置四个宝石蓝的伪 成分,让它在 0 至 .5turn 的约束内转悠。由此,要获得一个 五分之一 比率的饼 图,伪元素的代码只怕是这么的:

html:

XHTML

<div class="pie2"></div>

1
<div class="pie2"></div>

css:

CSS

.pie2{ width:140px; height: 140px; background: #8BC34A; border-radius: 50%; background-image: linear-gradient(to right,transparent 50%,#655 0); } .pie2::before{ content: ''; display: block; margin-left: 50%; height: 100%; border-radius: 0 100% 100% 0 / 50%; background: #655;/*当范围大于50%时,需求改动伪成分的背景颜色为#655;*/ transform-origin: left; transform: rotate(.1turn); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.pie2{
    width:140px;
    height: 140px;
    background: #8BC34A;
    border-radius: 50%;
    background-image: linear-gradient(to right,transparent 50%,#655 0);
}
.pie2::before{
    content: '';
    display: block;
    margin-left: 50%;
    height: 100%;
    border-radius: 0 100% 100% 0 / 50%;
    background: #655;/*当范围大于50%时,需要改变伪元素的背景颜色为#655;*/
    transform-origin: left;
    transform: rotate(.1turn);
}

用 CSS 动画来兑现三个饼图从 0 变化到 百分百的卡通片,进而拿到二个炫目的快慢提示器:

图片 15

代码如下:

html:

XHTML

<div class="pie3"></div>

1
<div class="pie3"></div>

css:

CSS

.pie3 { width:140px; height: 140px; border-radius: 50%; background: yellowgreen; background-image: linear-gradient(to right, transparent 50%, currentColor 0); color: #655; } .pie3::before { content: ''; display: block; margin-left: 50%; height: 100%; border-radius: 0 100% 100% 0 / 50%; background-color: inherit; transform-origin: left; animation: spin 3s linear infinite, bg 6s step-end infinite; } @keyframes spin { to { transform: rotate(.5turn); } } @keyframes bg { 50% { background: currentColor; } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.pie3 {
    width:140px;
    height: 140px;
    border-radius: 50%;
    background: yellowgreen;
    background-image: linear-gradient(to right, transparent 50%, currentColor 0);
    color: #655;
}
 
.pie3::before {
    content: '';
    display: block;
    margin-left: 50%;
    height: 100%;
    border-radius: 0 100% 100% 0 / 50%;
    background-color: inherit;
    transform-origin: left;
    animation: spin 3s linear infinite, bg 6s step-end infinite;
}
 
@keyframes spin {
    to { transform: rotate(.5turn); }
}
@keyframes bg {
    50% { background: currentColor; }
}

1 赞 8 收藏 评论

图片 16


CSS3创制精美的iphone电话Logo,不行使图片,

<!DOCTYPE HTML>
<html lang=zh-cn>
<head>
<meta charset=utf-8>
<title>CSS3完美贯彻iphone电话图标</title>
<style>
*{margin:0px;padding:0px;}
body{background:#b1b1b1;margin:0px;padding:0px;font-size:14px;color:#000;}
.icon {width: 56px;height: 56px;z-index: 10;position: absolute;left: 50%;top: 50%;margin-left: -28px;margin-top: -28px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: rgba(0,0,0,0.5) 0 1px 2px;
-moz-box-shadow: rgba(0,0,0,0.5) 0 1px 2px;
box-shadow: rgba(0,0,0,0.5) 0 1px 2px;
}
.icon span {
display: block;text-align: center;font: bold 11px/15px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;color: #fff;position: absolute;top: 58px;left: -10px;width: 76px;
text-shadow: rgba(0,0,0,0.3) 1px 2px 1px;
text-transform: capitalize;
}
.i_phone {
width: 100%;height: 100%;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
position: relative;
overflow: hidden;
cursor: pointer;
background:-webkit-linear-gradient(top, #015801, #06f700);
background:-moz-linear-gradient(top, #015801, #06f700);
background:-ms-linear-gradient(top, #015801, #06f700);
background:-o-linear-gradient(top, #015801, #06f700);
background:linear-gradient(top, #015801, #06f700);
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#015801', endColorstr='#06f700', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#015801', endColorstr='#06f700', GradientType=0);
}

.i_phone .bg_angled {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
width: 125%;
height: 125%;
position: absolute;
left: -7px;
top: -7px;
-webkit-background-size: 4px 4px;
-moz-background-size: 4px 4px;
-ms-background-size: 4px 4px;
-o-background-size: 4px 4px;
background-size: 4px 4px;
background-color: none;
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent 100%);
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent 100%);
background-image: -ms-linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent 100%);
background-image: -o-linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent 100%);
background-image: linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent 100%);
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}

.i_phone:after{
content: '';
-webkit-box-shadow: inset #06f700 0 0 2px;
-moz-box-shadow: inset #06f700 0 0 2px;
box-shadow: inset #06f700 0 0 2px;
width: 100%;
height: 100%;
position: absolute;
display: block;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
z-index: 2;
}

.i_phone:before{
content: '';
width: 100%;
height: 50%;
position: absolute;
display: block;
-webkit-border-radius: 10px 10px 50% 50% / 10px 10px 5px 5px;
-moz-border-radius: 10px 10px 50% 50% / 10px 10px 5px 5px;
border-radius: 10px 10px 50% 50% / 10px 10px 5px 5px;
background: rgba(255,255,255,0.5);
z-index: 5;
-webkit-box-shadow: inset rgba(255,255,255,0.5) 0 1px 0;
-moz-box-shadow: inset rgba(255,255,255,0.5) 0 1px 0;
box-shadow: inset rgba(255,255,255,0.5) 0 1px 0;
}

.i_phone .truba {
position: absolute;
top: 7px;
left: 5px;
z-index: 1;
width: 40px;
height:40px;
font: bold 40px/40px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif !important;
color: #f1f5f9;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
text-shadow: rgba(0,0,0,0.5) 0 0 2px;
}

.i_phone .truba:after {
content: '';
position: absolute;
width: 12px;
height: 10px;
top: 2px;
left: 25px;
background: #f1f5f9;
-webkit-border-radius: 50% / 2px 2px 6px 2px;
-moz-border-radius: 50% / 2px 2px 6px 2px;
border-radius: 50% / 2px 2px 6px 2px;
-webkit-transform: rotate(-57deg);
-moz-transform: rotate(-57deg);
-ms-transform: rotate(-57deg);
-o-transform: rotate(-57deg);
transform: rotate(-57deg);
}

.i_phone .truba:before {
content: '';
position: absolute;
width: 12px;
height: 10px;
top: 24px;
left: 4px;
background: #f1f5f9;
-webkit-border-radius: 50% / 2px 2px 2px 6px;
-moz-border-radius: 50% / 2px 2px 2px 6px;
border-radius: 50% / 2px 2px 2px 6px;
-webkit-transform: rotate(-25deg);
-moz-transform: rotate(-25deg);
-ms-transform: rotate(-25deg);
-o-transform: rotate(-25deg);
transform: rotate(-25deg);
}

.i_phone .truba b {
position: absolute;
width: 35px;
height: 4px;
top: 17px;
left: 7px;
background: #f1f5f9;
border-radius: 0 0 5px 5px;
-webkit-transform: rotate(-47deg);
-moz-transform: rotate(-47deg);
-ms-transform: rotate(-47deg);
-o-transform: rotate(-47deg);
transform: rotate(-47deg);
}
</style>
</head>
<body>
<div>;
<div class="icon">
<div class="i_phone">
<div class="bg_angled"></div>
<div class="truba"><b></b></div>
</div>
<span>Phone</span>
</div>
</body>
</html>

!DOCTYPE HTML html lang=zh-cn head meta charset=utf-8 titleCSS3完美贯彻iphone电话Logo/title style *{margin:0px;pa...

CSS3初体验之奇伎淫巧

2016/07/22 · CSS

初藳出处: luckykun   

自CSS3盛行的话,就算早前看过一次全体的新添属性,但实际在实质上项目中用到的相当少。所以未有变异系统性的认知,以致观望作用立马就能够想到技术方案的技艺。然后方今恰恰超过三个索要绘制一大波卡通的须求,所以决定趁此时机好好切磋一下以此既熟习又素不相识的css3。

在规范开班css3在此之前,先来介绍一些比较杰出的css3实例,让我们能够心得一下css3的魅力,本文子禽涉及以下几个css3的特性:

border-radius、::after、attr和content、box-sizing、linear-gradient、radial-gradient、box-shadow

The problem

饼图,四处可知,可是真的去达成,依旧要下点功夫的。
比如说我们要成立贰个速度提醒器,也许计时显示器,平时涉及动用外界图像编辑器为饼图的八个值制造图像,或应用js脚本设计尤为复杂的图纸。

近日有任何更加好的办法去贯彻。

border-radius

  • 三从四德这么些本性,写过css的同学都驾驭,用来发生圆角,举例画三个圆形:
CSS

div { width:100px; height:100px; background:red;
border-radius:100px; //border-radius:100%; }

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6cdb8ba28662560133-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6cdb8ba28662560133-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f6cdb8ba28662560133-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6cdb8ba28662560133-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f6cdb8ba28662560133-5">
5
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6cdb8ba28662560133-6">
6
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6cdb8ba28662560133-1" class="crayon-line">
div {
</div>
<div id="crayon-5b8f6cdb8ba28662560133-2" class="crayon-line crayon-striped-line">
    width:100px;
</div>
<div id="crayon-5b8f6cdb8ba28662560133-3" class="crayon-line">
    height:100px;
</div>
<div id="crayon-5b8f6cdb8ba28662560133-4" class="crayon-line crayon-striped-line">
    background:red;
</div>
<div id="crayon-5b8f6cdb8ba28662560133-5" class="crayon-line">
    border-radius:100px; //border-radius:100%;
</div>
<div id="crayon-5b8f6cdb8ba28662560133-6" class="crayon-line crayon-striped-line">
}
</div>
</div></td>
</tr>
</tbody>
</table>


[![](http://7xtawy.com1.z0.glb.clouddn.com/css31.png)](http://7xtawy.com1.z0.glb.clouddn.com/css31.png)
  • 接下来大家来看看它的语法:border-radius: [左上] [右上] [右下] [左下],于是大家来画二个半圆
CSS

div { width: 100px; height: 50px; background: red; border-radius:
50px 50px 0 0; }

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6cdb8ba34696842044-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6cdb8ba34696842044-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f6cdb8ba34696842044-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6cdb8ba34696842044-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f6cdb8ba34696842044-5">
5
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6cdb8ba34696842044-6">
6
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6cdb8ba34696842044-1" class="crayon-line">
div {
</div>
<div id="crayon-5b8f6cdb8ba34696842044-2" class="crayon-line crayon-striped-line">
    width: 100px;
</div>
<div id="crayon-5b8f6cdb8ba34696842044-3" class="crayon-line">
    height: 50px;
</div>
<div id="crayon-5b8f6cdb8ba34696842044-4" class="crayon-line crayon-striped-line">
    background: red;
</div>
<div id="crayon-5b8f6cdb8ba34696842044-5" class="crayon-line">
    border-radius: 50px 50px 0 0;
</div>
<div id="crayon-5b8f6cdb8ba34696842044-6" class="crayon-line crayon-striped-line">
}
</div>
</div></td>
</tr>
</tbody>
</table>


[![](http://7xtawy.com1.z0.glb.clouddn.com/css32.png)](http://7xtawy.com1.z0.glb.clouddn.com/css32.png)
  • 那假诺要画贰个椭圆该咋做呢?你会意识上边的语法貌似做不到了,其实border-radius的值还应该有后生可畏种语法: x半径/y半径:  
CSS

div { width: 100px; height: 50px; background: red; border-radius:
50px/25px; }

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6cdb8ba3a532261250-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6cdb8ba3a532261250-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f6cdb8ba3a532261250-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6cdb8ba3a532261250-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f6cdb8ba3a532261250-5">
5
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6cdb8ba3a532261250-6">
6
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6cdb8ba3a532261250-1" class="crayon-line">
div {
</div>
<div id="crayon-5b8f6cdb8ba3a532261250-2" class="crayon-line crayon-striped-line">
    width: 100px;
</div>
<div id="crayon-5b8f6cdb8ba3a532261250-3" class="crayon-line">
    height: 50px;
</div>
<div id="crayon-5b8f6cdb8ba3a532261250-4" class="crayon-line crayon-striped-line">
    background: red;
</div>
<div id="crayon-5b8f6cdb8ba3a532261250-5" class="crayon-line">
    border-radius: 50px/25px;
</div>
<div id="crayon-5b8f6cdb8ba3a532261250-6" class="crayon-line crayon-striped-line">
}
</div>
</div></td>
</tr>
</tbody>
</table>

[![](http://7xtawy.com1.z0.glb.clouddn.com/css33.png)](http://7xtawy.com1.z0.glb.clouddn.com/css33.png)
  • 借使小编要画半个椭圆,又要如何是好呢?
CSS

div { width: 100px; height: 50px; background: red; border-radius:
100% 0 0 100% /50%; }

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6cdb8ba40391709445-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6cdb8ba40391709445-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f6cdb8ba40391709445-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6cdb8ba40391709445-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f6cdb8ba40391709445-5">
5
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6cdb8ba40391709445-6">
6
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6cdb8ba40391709445-1" class="crayon-line">
div {
</div>
<div id="crayon-5b8f6cdb8ba40391709445-2" class="crayon-line crayon-striped-line">
    width: 100px;
</div>
<div id="crayon-5b8f6cdb8ba40391709445-3" class="crayon-line">
    height: 50px;
</div>
<div id="crayon-5b8f6cdb8ba40391709445-4" class="crayon-line crayon-striped-line">
    background: red;
</div>
<div id="crayon-5b8f6cdb8ba40391709445-5" class="crayon-line">
    border-radius: 100% 0 0 100% /50%;
</div>
<div id="crayon-5b8f6cdb8ba40391709445-6" class="crayon-line crayon-striped-line">
}
</div>
</div></td>
</tr>
</tbody>
</table>

[![](http://7xtawy.com1.z0.glb.clouddn.com/css34.png)](http://7xtawy.com1.z0.glb.clouddn.com/css34.png)

transform solution

第风度翩翩,大家来画一个圆:

<pre>
.pie {
width: 100 px;
height: 100 px;
border-radius: 50 %;
background: yellowgreen;
}
</pre>

图片 17

既然如此是饼图,比方双色饼图,就必要另意气风发种颜色来显示速度,再画多少个半圆:

能够用渐变来做:

background-image: linear-gradient(to right, transparent 50%, #655 0);

图片 18

我们还亟需成立二个遮罩层:虚线部分。

<pre>
.pie::before {
content: '';
display: block;
margin-left: 50%;
height: 100%;
border-radius: 0 100% 100% 0 / 50%;
background-color: inherit;
transform-origin: left;
}
</pre>

创立好了,可是有几点要专一的地点:

  • 因为大家想让那一个层盖住古铜黑的大器晚成部分,所以大家可以给它加个蓝紫的背景,也得以用
    <pre>
    background-color: inherit;
    </pre>来制止双重注脚。

  • 旋转的中央点是圆心,大家能够如此评释:
    <pre>
    transform-origin: left;
    //或者
    transform-origin: 0 50%;
    </pre>

  • 我们创设遮罩层的指标是盖住深黄的那某个,它需借使个半圆,但是大家以往写的是个矩形,所以为了制止侧漏,大家用border-radius 让它也改成半圆:

<pre>
border-radius: 0 100% 100% 0 / 50%;
</pre>

遮罩层也就就绪了,未来给一个转悠角度省视:

<pre>
.pie::before {
content: '';
display: block;
margin-left: 50%;
height: 100%;
border-radius: 0 100% 100% 0 / 50%;
background: #655;
transform-origin: left;
transform: rotate(.1turn);
}
</pre>

图片 19

旋转36度

现行反革命加点动漫让它动起来:

<pre>
@keyframes spin {
to {
transform: rotate(.5turn)
}
}

@keyframes bg {
50% {
background: #655
}
}

.pie::before {
content: '';
display: block;
margin-left: 50%;
height: 100%;
border-radius: 0 100% 100% 0/50%;
background-color: inherit;
transform-origin: left;
animation: spin 3s linear infinite,bg 6s step-end infinite
}

</pre>

点击查阅:
http://dabblet.com/gist/722909b9808c14eb7300

到现在率先步好了,更进一层,动脑,假诺大家在html中定义百分数,就会显得相应的比重,这差不离是不能够更加好了。
有如这么定义:
<pre>
<div class="pie">20%</div>
<div class="pie">60%</div>
</pre>

图片 20

就好像这么

多个来得十分之二,另二个来得四分一 .

第风姿洒脱,我们搜求能或不能够用行内样式,然后用生龙活虎段脚本去深入分析。

回头想生龙活虎想:大家是要调控伪成分的转动度数来体现百分比的,那难点来了(开采机本事哪家强。。XD卡塔 尔(英语:State of Qatar),大家无语直接给伪元素增添行内样式...怎么办吧?

The solution comes from one of the most unlikely places.

笔者们刚刚定义了动漫,今后它该停停了。

我们将选用animation的delay 来贯彻,与健康的应用不一样的是,我们将使用负数 让它停在大家定义的岗位。很吸引是不是,animation-delay 的参数为负数,那是不相符标准的,但是在少数意况下,它是很有用的,看描述:

“A negative delay is valid. Similar to a delay of 0s, it means that the ani-mation executes immediately, but is automatically progressed by the ab-solute value of the delay, as if the animation had started the specifiedtime in the past, and so it appears to start partway through its activeduration.”
— CSS Animations Level 1 (w3.org/TR/css-animations/#animation-delay)

因为动漫被定义为pause 的时候,只会显得第生机勃勃帧。

那儿,彰显在饼图上的百分比正是大家定义的延迟时间占全体动漫时间的比重。

诸如,我们的卡通持续时间是6s, 延迟时间是-1.2s, 就能够来得 十分四 ;
为了看起来方便,大家定义整个动漫的持续时间为100s。

因为动漫是萧规曹随的,所以设置多大的延期是不会有别的影响的。

事例走起:

<pre>
<div class="pie" style="animation-delay: -20s"></div>
<div class="pie" style="animation-delay: -60s"></div>
</pre>

CSS 规则:
<pre>
@keyframes spin {
to {
transform: rotate(.5turn);
}
}

@keyframes bg {
50% {
background: #655;
}
}

.pie::before {
/* [Rest of styling stays the same] */
animation: spin 50s linear infinite,
bg 100s step-end infinite;
animation-play-state: paused;
animation-delay: inherit;
}
</pre>

<pre>
$$('.pie').forEach(function(pie) {
var p = pie.textContent;
pie.style.animationDelay = '-' + parseFloat(p) + 's';
});
</pre>

图片 21

咱俩前天不想见见那几个比例,怎么做呢?

<pre>
color: transparent;
</pre>

如此那般字体就看不到了,不过依然是能够选酣春打字与印刷的。
此外,大家得以让这几个百分比居中,防止它被入选时,出未来别的地点。

几点注意的地点:

  • 为了落到实处垂直居中,大家能够:

<pre>
height:100px;
line-height:100px;
</pre>

唯独这么的代码是重新的,只写line-height 就好。

Convert height to line-height (or add a line-height equal to the height, but that’s pointless code duplication, because line- height would set the computed height to that as well ).

  • 给伪元素 相对定位,防止字飞出去。
  • text-align:center; 完毕程度居中。

末尾的代码是这么的:

<pre>

.pie {
opacity: 1;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: yellowgreen;
background-image: linear-gradient(to right ,transparent 50% , #655 0);
}

@keyframes spin {
to {
transform: rotate(.5turn);
}
}

@keyframes bg {
50% {
background: #655;
}
}

.pie::before {
/* [Rest of styling stays the same] */
animation: spin 50s linear infinite,
bg 100s step-end infinite;
animation-play-state: paused;
animation-delay: inherit;
}
</pre>

在线查看:http://scaukk.github.io/css/static_pie_chart.html

自然,还是能够用svg 达成,篇幅有限,这里就背着了。


题外话:

这是张鑫旭 早先做的 摊鸡蛋饼 动漫 XD
http://www.zhangxinxu.com/wordpress/2014/04/css3-pie-loading-waiting-animation/

既然 饼图笔者都写好了,干脆写点动漫,也摊个鸡蛋饼。
原理大致,有意思味的能够看看。
访谈地址:

http://scaukk.github.io/css/pie.html


正文内容大约就那样多,款待交换,迎接举报,如有错误,还请修改,谢谢阅读。

::after

这里拿个大概的例证来看,大家要画二个凸镜,如下图:

图片 22

解析一下,这些突镜可以由八个div组成,一个是浅灰绿的圆环,一个是浅紫把手(旋转45度卡塔 尔(英语:State of Qatar)。所以大家就须求用四个div来促成啊?答案是NO,八个div也是足以的,大家能够依附::after来增加一个要素。同理若是急需多个div,我们还足以应用::before再加多二个成分。上面看一下代码:

CSS

div { width: 50px; height: 50px; border-radius: 50%; border: 5px solid #333; position: relative; } div::after { content: ''; display: block; width: 8px; height: 60px; border-radius: 5px; background: #333; position: absolute; right: -22px; top: 38px; transform: rotate(-45deg); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
div {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 5px solid #333;
    position: relative;
}
div::after {
    content: '';
    display: block;
    width: 8px;
    height: 60px;
    border-radius: 5px;
    background: #333;
    position: absolute;
    right: -22px;
    top: 38px;
    transform: rotate(-45deg);
}

attr和content

举个例子大家要贯彻多个漂移提醒的成效。古板办法,使用title属性就会贯彻,然则今后我们要越来越美观,能够选择css3提供的attr:能够在css中获取到元素的某个属性值,然后插入到伪元素的content中去。

要是我们的html代码如下:

XHTML

<div data-title="hello, world">hello...</div>

1
<div data-title="hello, world">hello...</div>

我们来拜谒完结这么些插件的css代码:

CSS

div { position: relative; } div: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; }

1
2
3
4
5
6
7
8
9
10
11
12
13
div {
    position: relative;
}
div: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;
}

当hover的时候,在要素后面部分增多七个剧情为data-title属性值的要素,所以就落到实处了hover显示的职能,如下图所示:

图片 23

box-sizing

大家理解,在正式盒子模型中,成分的总宽=content + padding + border + margin。 css中的盒子模型大家兴许都精通,可是那些盒子模型的品质或者未有那么多少人知晓,box-sizing属性就是用来重定义这些总括格局的,它有多个取值,分别是:content-box(默认)border-boxpadding-box

诚如的话,若是大家需求有叁个占宽200px、padding10px、border5px的div,经过测算,要那样定义样式。

CSS

div { width: 170px; //这里的小幅要使用200-10*2-5*2 = 170得到。 height: 50px; padding: 10px; border: 5px solid red; }

1
2
3
4
5
6
div {
    width: 170px; //这里的宽度要使用200-10*2-5*2 = 170得到。
    height: 50px;
    padding: 10px;
    border: 5px solid red;
}

然后咱们来利用一下box-sizing属性。

CSS

div { box-sizing: border-box; width: 200px; //这里的宽窄正是因素所占总增长幅度,不须要总括 height: 50px; padding: 10px; border: 5px solid red; }

1
2
3
4
5
6
7
div {
    box-sizing: border-box;
    width: 200px; //这里的宽度就是元素所占总宽度,不需要计算
    height: 50px;
    padding: 10px;
    border: 5px solid red;
}

linear-gradient

做活动页面包车型大巴时候大家经常会遇见那样的须求:

最上端的高级中学级一张大banner图片,然后一切区域的背景象要依据图片背景象渐变。就足以行使那特本性了。

CSS

div { width: 200px; height: 50px; background: linear-gradient(to right, red, yellow, black, green); }

1
2
3
4
5
div {
    width: 200px;
    height: 50px;
    background: linear-gradient(to right, red, yellow, black, green);
}

图片 24

是或不是很有意思?其实,linear-gradient再有越多风趣的作用,你能够依照下边包车型客车动图去体会一下:

图片 25

您感到那就完了?等等,还应该有更加强盛的呢!repeating-linear-gradient,来心得一下:

图片 26

linear-gradient还有更加强大的法力,比如它能够给成分添扩展个渐变,进而到达更NB的效率。

radial-gradient

上面的linear-gradient是线性渐变,那特性子是径向渐变。下边包车型客车代码达成了四个chrome的logo。

图片 27

CSS

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%); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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%);
}

兑现原理便是采纳了四个渐变色放在div上,友好协会被覆盖,视觉上就生出了想要的效应,是否很有力!看了下图你就驾驭其实正是在div上加了很七个渐变。

图片 28

box-shadow

地方的例子大都是对css3新个性的问询和认知,这一个实例则是有关于建设方案的事例。

  • 须要:大家要完成上面那么些功效图(多少个边框:深黑,葡萄紫,森林绿卡塔 尔(阿拉伯语:قطر‎:图片 29
  • 解法黄金年代:借使尚未css3学问,我们得以做如此做:用八个div,分别安装边框,然后分别调控宽高和职责来达到那些效应。显明,很复杂,这里就不贴代码了。
  • 解法二:今后大家有css3的学问了,依靠box-shadow就能够轻巧废除那些标题。先来探望它的语法:box-shadow: [x偏移] [y偏移] [阴影模糊宽度] [阴影宽度] [颜色],何况还是能够添扩展个黑影,使用逗号隔开分离。图片 30当然你还足以三番四次增添,四重边框,五重边框……都不再是主题素材啊。此外,还是能够加圆角,阴影会贴紧内层div。

    使用这种方法,有一个缺点就是,不支持虚线边框。

  • 解法三: 使用outline(只好扶植两重边框卡塔尔国图片 31使用这种方法的缺点就是,只能支持两层的边框,而且还不能根据容器的border-radius自动贴合。

总结

通过近日对css3的深刻摸底,发掘css3真的很强盛,探究起来依然挺风趣的,唯有想不到,以为并没有做不到。可是为了达成超级帅炫的功效,或然供给编写制定多量的css代码,那时利用什么本领就必要大家本身来权衡了。

1 赞 6 收藏 评论

图片 32

本文由9159.com发布于前端,转载请注明出处:所以决定趁此机会好好研究一下这个既熟悉又陌

关键词: