>

绘制你需要的几何图形,CSS3初体验之奇技淫巧

- 编辑:至尊游戏网站 -

绘制你需要的几何图形,CSS3初体验之奇技淫巧

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

用 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

思路跋山涉水的近义词伪成分方案:是把具有样式(背景、边框等)应用到伪成分上,然后再对 伪成分进行变形。因为咱们的从头到尾的经过并非包涵在伪成分里的,所以内容并不会遭遇变形的熏陶。代码如下跋山涉水的近义词

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 样式) 。通过 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() 变形属性来让那些伪元素转起来。 尽管我们要显示出 二成的比率,我们可以钦点旋转的值为 72deg (0.2 × 360 = 72) ,写成 .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;/*当范围大于百分之七十时,供给转移伪成分的背景颜色为#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

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)

::after

此地拿个轻易的例子来看,我们要画二个放大镜,如下图跋山涉水的近义词

至尊游戏网站 17

深入分析一下,这么些放大镜能够由八个div组成,几个是深藕红的圆环,一个是郎窑红把手(旋转45度)。所以大家就要求用七个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显示的效用,如下图所示跋山涉水的近义词

至尊游戏网站 18

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

至尊游戏网站 19

是还是不是很风趣?其实,linear-gradient还恐怕有更加多有意思的效果,你能够依靠下边包车型客车动图去感受一下爬山涉水

至尊游戏网站 20

您以为那就完了?等等,还有更刚劲的吧!repeating-linear-gradient,来感受一下爬山涉水

至尊游戏网站 21

linear-gradient再有进一步苍劲的成效,比方它能够给元素增加两个渐变,进而达到更NB的功能。

radial-gradient

上面的linear-gradient是线性渐变,那脾性子是径向渐变。上边包车型大巴代码完毕了一个chrome的logo。

至尊游戏网站 22

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上加了无尽个渐变。

至尊游戏网站 23

box-shadow

地方的例证大都以对css3新特性的摸底和认知,这么些实例则是有关于施工方案的例子。

  • 必要跋山涉水的近义词大家要兑现下边这一个意义图(多少个边框跋山涉水的近义词藏青,金棕,灰褐)爬山涉水至尊游戏网站 24
  • 解法后生可畏爬山涉水假设还没css3学问,我们能够做如此做爬山涉水用八个div,分别安装边框,然后分别调控宽高和岗位来完毕这几个功用。明显,很复杂,这里就不贴代码了。
  • 解法二爬山涉水将来大家有css3的学问了,依据box-shadow就能够轻便化解那些标题。先来拜见它的语法爬山涉水box-shadow: [x偏移] [y偏移] [阴影模糊宽度] [阴影宽度] [颜色],而且还是能增多多个黑影,使用逗号隔绝。至尊游戏网站 25当然你还足以承继加码,四重边框,五重边框……都不再是主题材料啊。其他,仍为能够加圆角,阴影会贴紧内层div。

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

  • 解法三:使用outline(只可以援救两重边框)至尊游戏网站 26使用这种方法的缺点就是,只能支持两层的边框,而且还不能根据容器的border-radius自动贴合。

总结

通过这段时日对css3的透顶摸底,发掘css3真的很苍劲,钻探起来如故挺风趣的,唯有想不到,感到未有做不到。可是为了完成超帅炫的职能,恐怕必要编制大批量的css代码,那一年利用什么手艺就须要大家通力合作来度量了。

1 赞 6 收藏 评论

至尊游戏网站 27

本文由软件综合发布,转载请注明来源:绘制你需要的几何图形,CSS3初体验之奇技淫巧