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中的背景和边框,绘制你需要的几何图形。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%7CimageView2/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%7CimageView2/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%7CimageView2/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揭秘》

网站地图xml地图