CSS中的背景和边框,绘制你需要的几何图形

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、四分之一椭圆

思路:其中一个角的水平和垂直半径值都需要是100%,而其他三个角都不能设为圆角。

图片 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乘以100%约等于 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;
}

技巧总结:我们希望图片的尺寸属性保留 100% 这个值,这样当浏览器不支持变 形样式时仍然可以得到一个合理的布局。 „ 通过 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() 变形属性来让这个伪元素转起来。 如果我们要显示出 20% 的比率,我们可以指定旋转的值为 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 到 50% 的比率时运作良好,但如果我们尝试显示 60% 的比率时(比如指定旋转值为 .6turn 时),会出现问题。解决方法:使 用上述技巧的一个反向版本来实现这个范围内的比率:设置一个棕色的伪 元素,让它在 0 至 .5turn 的范围内旋转。因此,要得到一个 60% 比率的饼 图,伪元素的代码可能是这样的:

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 变化到 100% 的动画,从而得到一个炫酷的进度指示器:

图片 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

shkd

snks

1.半透明边框

问题原因:背景会扩展到边框border下
解决方案:把背景限制在padding-box中
background-clip: padding-box;

Paste_Image.png

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)

-

2.多重边框

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

-

box-shadow方案

Paste_Image.png

div {
    width: 100px;
    height: 60px;
    margin: 25px;
    background: yellowgreen;
    box-shadow: 0 0 0 10px #655,
            0 0 0 15px deeppink,
            0 2px 5px 15px rgba(0,0,0,.6);
}

注意:这里的边框是向外扩展的外边框,不会响应鼠标事件,加入属性insert可以解决这个问题

Paste_Image.png

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

一、背景与边

outline 方案
background: yellow;
border: 10px solid #655;
outline: 5px solid deeppink;```
注意:只适用于双层边框的效果;不一定能产生适应border-radius属性的圆角。

####3.背景的灵活定位
#####background-position 方案

div {
background: url(http://csssecrets.ioode-pirate.svg)
no-repeat bottom right #58a;
background-position: right 20px bottom 10px;

/* Styling */
max-width: 10em;
min-height: 5em;
padding: 10px;
color: white;
font: 100%/1 sans-serif;

}```
注意:提供回退方案,使得在不支持background-position的浏览器中图像在右下角。

background: url(http://csssecrets.ioode-pirate.svg)
                no-repeat bottom right #58a;```

#####background-origin 方案
正常的background-position是以padding-box为准的,要排除padding-box 的影响可以使用background-origin 属性。

background-origin: content-box;
div {
background: url(http://csssecrets.ioode-pirate.svg)
no-repeat bottom right #58a;
background-origin: content-box;

/* Styling */
max-width: 10em;
min-height: 5em;
padding: 10px; //改变padding的值,背景的位置随之变化,固定在content-box内
color: white;
font: 100%/1 sans-serif;

}

#####calc() 方案
采用左上角思维,用calc()函数来确定位置,100%偏移量就靠右,100%-20px就是距离右侧边界20px;

div {
background: url(http://csssecrets.ioode-pirate.svg)
no-repeat bottom right #58a;
background-position: calc(100% - 20px) calc(100% - 10px);

/* Styling */
max-width: 10em;
min-height: 5em;
padding: 10px;
color: white;
font: 100%/1 sans-serif;

}```
注意:这个方案不会随padding的变化而变化,背景固定在padding box 内。

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

1、半途明边框


当页面中有div,css样式如下时:

width: 100px;

height: 100px;

/*border: 20px solid hsla(0, 0%, 100%, .5);*/

border: 20px solid rgba(256, 256, 256, .5);

background: #809328;

页面显示如图1:

图片 19

图1

我们通过使用了一个半透明边框,可以看出,背景会延伸到边框所在的区域下层。即使我们使用了不透明的实色边框,也不会改变这个事实。但是,我们可以通过background-clip属性,来调整上述默认行为带来的不便。

background-clip的默认值是border-box,意味着背景会被元素边框的外边框裁切掉,它还有两个取值:padding-box 和 content-box。下面我们使用代码来尝试一下:

width: 100px;

height: 100px;

border: 20px solid rgba(11, 11, 11, .5);

background: #809328;

padding: 10px;

background-clip: padding-box;

/*background-clip: content-box;*/

为了区别两个特性,我们把div增加了padding值,左面的div background-clip 为padding-box,右面的div取值content-box,效果如图2:

图片 20

图2

那么,思考,下图3这样容器中一层白色背景和一道半透明边框的图片,如何形成?

图片 21

图3

4.边框内圆角

效果:边框内显示圆角,边框外部仍然是直角
解决方案:box-shadow和outline配合使用。
注意:box-shadow的宽度最小值,可以直接取border-radius的一半

div {
    outline: .6em solid #655;
    box-shadow: 0 0 0 .4em #655; /* todo calculate max of this */

    max-width: 10em;
    border-radius: .8em;
    padding: 1em;
    margin: 1em;
    background: tan;
    font: 100%/1.5 sans-serif;
}

Paste_Image.png

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

图片 22

是不是很有趣?其实,linear-gradient还有更多有趣的功能,你可以根据下面的动图去感受一下:

图片 23

你以为这就完了?等等,还有更强大的呢!repeating-linear-gradient,来感受一下:

图片 24

linear-gradient还有更加强大的功能,比如它可以给元素添加多个渐变,从而达到更NB的效果。

2、多重边框

我们都使用过box-shadow

box-shadow: 水平阴影的位置 垂直阴影的位置 模糊距离 阴影的尺寸 阴影的颜色 将外部阴影 (outset) 改为内部阴影;

并且,可以使用逗号分隔,因此可以创建任意数量的投影。我们利用这个特性,可以做出多重边框的效果,如下图4:

图片 25

图4

需要注意的是:投影和边框有所区别,因为它不会影响布局,而且外部shadow不会响应鼠标事件。

在某些情况下可能只需要两层边框,那就可以先设置一层常规边框,再加上outline(描边)属性来产生外层的边框。描边的另一个好处是,可以通过outline-offset设置它和元素边缘的间距。可实现下图5效果:

图片 26

图5

5.条纹背景

问题:用css直接创建条纹背景
解决方案:利用渐变色的色标位置,当两色色标位置重合时,渐变效果消失,变成实色条纹

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

3、灵活的背景定位

如果我们想把一个图片当做背景放在小div的右下角,且向左偏移20px,向上偏移10px,我们要计算出距离div左上角的距离,这样很不方便。css3中,background-position给出了扩展:

background:url(cute.png) no-repeat #58a;

background-position: right 20px bottom 10px;

此外,还需提供一个回退方案,供不支持该语法的浏览器看起来不会很奇怪:

background:url(cute.png) no-repeat bottom right #58a;

background-position: right 20px bottom 10px;

在给背景图片设置距离某个角偏移时,有一种特殊情况:偏移量与容器的内边距一致,如果采用上面的语法:

padding: 10px;

background:url(cute.png) no-repeat bottom right #58a;

background-position: right 20px bottom 10px;

但是如果内边距改变的话,需要改变三个值。每个盒子都包括三个矩形框:border-box、padding-box(内边距的外沿框)、content-box。默认情况下,background-position 以 padding-box 为准,我们可以通过设置background-origin来改变它,改善后的代码如下:

padding: 10px;

background:url(cute.png) no-repeat bottom right #58a;

background-origin: content-box;

也可以使用calc()函数来表示:

background:url(cute.png) no-repeat;

background-position: calc(100% - 20px) calc(100% - 10px);

水平条纹

两色条纹

background: linear-gradient(#fb3 50%, #58a 0); 
background-size: 100% 30px;```
注意:第二个色标位置本来应该是50%,为了避免每次都修改两个参数,用到规范:当第二个色标位置设置为0,那么它的位置就会调整为前一个色标的位置值

![Paste_Image.png](http://upload-images.jianshu.io/upload_images/4648896-c6e5320dbbf32ba4.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)

三色条纹

background: linear-gradient(#fb3 33.3%, #58a 0,#58a 66.6%, yellowgreen 0);
background-size: 100% 45px;

#####垂直条纹

background: linear-gradient(to right, #fb3 50%, #58a 0); //添加to right 属性
background-size: 30px 100%; //颠倒值,左右,上下

![Paste_Image.png](http://upload-images.jianshu.io/upload_images/4648896-e603b18811b2f43e.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)

#####两色斜向条纹

background: linear-gradient(45deg

box-shadow

上面的例子大都是对css3新属性的了解和认识,这个实例则是有关于解决方案的例子。

  • 需求:我们要实现下面这个效果图(三个边框:黑色,绿色,红色):图片 29
  • 解法一:假如没有css3知识,我们可以做这样做:用三个div,分别设置边框,然后分别控制宽高和位置来达到这个效果。显然,很复杂,这里就不贴代码了。
  • 解法二:现在我们有css3的知识了,借助box-shadow就可以轻松解决这个问题。先来看看它的语法:box-shadow: [x偏移] [y偏移] [阴影模糊宽度] [阴影宽度] [颜色],并且还能添加多个阴影,使用逗号隔开。图片 30当然你还可以继续增加,四重边框,五重边框……都不再是问题啦。另外,还能加圆角,阴影会贴紧内层div。

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

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

4、边框内圆角

要实现下面图6效果:

图片 32

图6

只需要以下样式:

background: tan;

border-radius: 20px;

box-shadow: 0 0 0 15px #655;

outline: 15px solid #655;

fb3 25%, #58a 0,

总结

通过这段时间对css3的深入了解,发现css3真的很强大,研究起来还是挺有趣的,只有想不到,感觉没有做不到。不过为了实现很酷炫的效果,可能需要编写大量的css代码,这个时候使用什么技术就需要我们自己来衡量了。

1 赞 6 收藏 评论

图片 33

5、条纹背景

图片 34

图7:  横条纹

background: linear-gradient(#fb3 50%, #58a 50%);

background-size: 50px;

图片 35

图8:  不等距条纹

background: linear-gradient(#fb3 30%, #58a 30%);

background-size: 50px;

为了避免每次改动条纹宽度时都需要修改两个数字,我们可以从规范找到捷径:

如果某个色标到位置值比整个列表中在它之前的色标的位置值都要小,则该色标的位置值会被设置为它前面所有色标位置值的最大值。

因此,上面代码可以改为:

background: linear-gradient(#fb3 30%, #58a 0);

background-size: 50px;

图片 36

图9: 三条纹

background: linear-gradient(#fb3 33.3%, #58a 0, #58a 66.6%, yellowgreen 0);

background-size: 100px;

33.3%表示0-0.33是黄色,0表示0.33蓝色开始,66.6表示蓝色结束,0表示66.6绿色开始

竖直条纹:

background: linear-gradient(to right, #fb3 50%, #58a 0);

斜向条纹:

图片 37

图10

background: linear-gradient(45deg, #fb3 25%, #58a 0, #58a 50%, #fb3 0, #fb3 75%, #58a 0);

background-size: 50px 50px;

图片 38

图11

background: linear-gradient(45deg, #fb3 50%, #58a 0);

background-size: 50px 50px;

图片 39

图12

background: repeating-linear-gradient(60deg, #fb3, #fb3 15px, #58a 0, #58a 30px);

58a 50%, #fb3 0,

6、复杂的背景图案

图片 40

图13

background: white;

background-image: linear-gradient(90deg, rgba(200,0,0,.5) 50%, transparent 0), linear-gradient(rgba(200,0,0,.5) 50%, transparent 0);

background-size: 30px 30px;

图片 41

图14

background: #58a;

background-image: linear-gradient(90deg, white 1px, transparent 0), linear-gradient(white 1px, transparent 0);

background-size: 30px 30px;

图片 42

图15:圆点

background: #655;

background-image: radial-gradient(tan 30%, transparent 0);

background-size: 30px 30px;

图片 43

图16:波点

background: #655;

background-image: radial-gradient(tan 30%, transparent 0), radial-gradient(tan 30%, transparent 0);

background-size: 30px 30px;

background-position: 0 0, 15px 15px;

图片 44

图17:棋盘

background: #eee;

background-image: linear-gradient(45deg, #bbb 25%, transparent 0, transparent 75%, #bbb 0),

linear-gradient(45deg, #bbb 25%, transparent 0, transparent 75%, #bbb 0);

background-position: 0 0, 15px 15px;

background-size: 30px 30px;

fb3 75%, #58a 0);

backgtound-size: 42.4px 42.4px

#####更加简洁的斜向条纹方案

background: repeating-linear-gradient(60deg,
#fb3, #fb3 15px,
#58a 0, #58a 30px);//repeating-linear-gradient属性
height: 100%;

#####设置同色系条纹
方法:设置最深的颜色为背景色,叠加半透明白色条纹来产生浅色条纹

background: #58a;
background-image: repeating-linear-gradient(30deg,
hsla(0,0%,100%,.1), hsla(0,0%,100%,.1) 15px,
transparent 0, transparent 30px);

height: 100vh;

![Paste_Image.png](http://upload-images.jianshu.io/upload_images/4648896-929a64d7ce2463b4.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)


####6.复杂的背景图案
CSS3 图案库lea.verou.me/css3patterns 
SVG 图案库philbit.com/svgpatterns
网格
思路:把水平和垂直的条纹进行叠加
#####方格条纹:

background: white;
background-image: linear-gradient(90deg, rgba(200,0,0,.5) 50%,transparent 0),
linear-gradient(rgba(200,0,0,.5) 50%, transparent 0);
background-size: 30px 30px;

#####可维护、合理的方案,可多种网格叠加

background: #58a;
background-image: linear-gradient(white 2px, transparent 0),
linear-gradient(90deg, white 2px, transparent 0),
linear-gradient(hsla(0,0%,100%,.3) 1px, transparent 0),
linear-gradient(90deg, hsla(0,0%,100%,.3) 1px, transparent 0);
background-size: 50px 50px, 50px 50px,
10px 10px, 10px 10px;

#####波点

background: #655;
background-image: radial-gradient(tan 20%, transparent 0),
radial-gradient(tan 20%, transparent 0);
background-size: 30px 30px;
background-position: 0 0, 15px 15px;```

7、伪随机背景

棋盘
background: #eee;
background-image: 
linear-gradient(45deg, #bbb 25%, transparent 0),
linear-gradient(45deg, transparent 75%, #bbb 0),
linear-gradient(45deg, #bbb 25%, transparent 0),
linear-gradient(45deg, transparent 75%, #bbb 0);
background-position:0 0,15px 15px,15px 15px,30px 30px;
background-size: 30px 30px;
优化
background: #eee;
background-image: 
linear-gradient(45deg, rgba(0,0,0,.5) 25%, transparent 0,transparent 75%,rgba(0,0,0,.5) 0),
linear-gradient(45deg, rgba(0,0,0,.5) 25%, transparent 0,transparent 75%,rgba(0,0,0,.5) 0);
background-position:0 0,15px 15px;
background-size: 30px 30px;

7.随机背景

解决方法:通过质数来增加随机性。又称为“蝉原则”,可用在需要生成随机情况的场合。

background: hsl(20, 40%, 90%);
background-image: 
    linear-gradient(90deg, #fb3 11px, transparent 0),
    linear-gradient(90deg, #ab4 23px, transparent 0),
    linear-gradient(90deg, #655 41px, transparent 0);
background-size: 83px 100%, 61px 100%, 41px 100%;

Paste_Image.png

8.连续的图像边框

border-image:工作原理,九宫格伸缩法,不适合
思路:在背景图片上再加上一层纯白色的实色背景

图片边框背景
padding: 1em;
border: 1em solid transparent;
background: linear-gradient(white,white),
            url(stone-art.jpg);//这里是边框背景图片地址
background-size: cover;
background-clip: padding-box, border-box;
background-origin: border-box;

简化代码

border: 1em solid transparent;
background: linear-gradient(white, white) padding-box,
       url(http://csssecrets.iostone-art.jpg) border-box  0 / cover;
信封边框
用background叠加
div {
    padding: 1em;
    border: 1em solid transparent;
    background: linear-gradient(white, white) padding-box,
                repeating-linear-gradient(-45deg, red 0, red 12.5%, transparent 0, transparent 25%, 
                  #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0 / 6em 6em;

    max-width: 20em;
    font: 100%/1.6 Baskerville, Palatino, serif;
}
用border-image属性
div {
    padding: 1em;
    border: 1em solid transparent;
    border-image:16 
                repeating-linear-gradient(-45deg, red 0, red 1em, transparent 0, transparent 2em, 
                  #58a 0, #58a 3em, transparent 0, transparent 4em);

    max-width: 20em;
    font: 100%/1.6 Baskerville, Palatino, serif;
}

Paste_Image.png

蚂蚁行军效果
@keyframes ants{to{background-position:100%}}

div {
    padding: 1em;
    border: 1px solid transparent;
    background: linear-gradient(white, white) padding-box,
                repeating-linear-gradient(-45deg, black 0, black 25%, 
                 white 0, white 50%) 0 / .6em .6em;
    max-width: 20em;
    animation: ants 12s linear infinite;
}

Paste_Image.png

Paste_Image.png

用border-image做一个顶部边框被裁减的效果

思路:运用border-image加上一条由渐变生成的垂直条纹,而边框的粗细有border中的width来控制。

div {
    max-width:20em;
    border-top: .2em solid transparent;
    border-image: 100% 0 0 linear-gradient(90deg, currentColor 8em, transparent 0);
    padding-top: 1em;
}

Paste_Image.png


本文整理自《CSS揭秘》

本文由星彩网app下载发布于前端技术,转载请注明出处:CSS中的背景和边框,绘制你需要的几何图形

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。