用 CSS3 绘制你要求的几何图形上海时时乐走势图

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显示的成效,如下图所示:

上海时时乐走势图官网 1

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

2016/08/12 · CSS

原来的作品出处: 流转的作家   

1、圆形

示例:上海时时乐走势图官网 2

思路:给其余圆柱产生分设置叁个十足大的 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、自适应椭圆

上海时时乐走势图官网 3

思路: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、自适应的半椭圆:沿横轴劈开的半椭圆

上海时时乐走势图官网 4

思路: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 个由空格分隔的值时,那几个值是以如此的规律分配到八个角上的(请小心,对椭圆半径来讲,斜杠前和斜杠后最多能够各有三个参数,这两组值是以平等的法门分配到各种角的)

上海时时乐走势图官网 5

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

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、自适应的半椭圆:沿纵轴劈开的半椭圆

上海时时乐走势图官网 6

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

代码如下:

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、五分之三椭圆

思路:在那之中二个角的水平和垂直半径值都需纵然百分百,而其他多个角都无法设为圆角。

上海时时乐走势图官网 7

代码如下:

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

上海时时乐走势图官网 8

思路:绘制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、平行四边形

上海时时乐走势图官网 9

思路:伪成分方案:是把持有样式(背景、边框等)应用到伪成分上,然后再对 伪成分进行变形。因为我们的剧情并非带有在伪成分里的,所以内容并不会境遇变形的震慑。代码如下:

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、菱形

上海时时乐走势图官网 10

思路:我们把这些手艺针对 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、菱形图片

上海时时乐走势图官网 11

思路:基于变形的方案,
作者们想让图片的增长幅度与容器的对角线相等,并非与边长相等。供给选用勾股定理,那个定律告诉大家,七个纺锤形的对角线长度等于它的边长乘以根号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、切角意义

上海时时乐走势图官网 12

思路:基于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、弧形切角

上海时时乐走势图官网 13

思路:上述渐变技艺还会有二个变种,能够用来创建弧形切角(比较多个人也把这种 效果称为“内凹圆角” ,因为它看起来就好像圆角的反向版本) 。独一的分别 在于,大家会用径向渐变来取代上述线性渐变,代码如下:

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、轻易的饼图

上海时时乐走势图官网 14

思路:基于 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); //旋转两圈

上海时时乐走势图官网 15

此方法展现 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 变化到 百分百的卡通,进而取得四个光彩夺目的速度提示器:

上海时时乐走势图官网 16

代码如下:

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 收藏 评论

上海时时乐走势图官网 17

-

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

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

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

6、复杂的背景图案

上海时时乐走势图官网 18

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

上海时时乐走势图官网 19

图14

background: #58a;

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

background-size: 30px 30px;

上海时时乐走势图官网 20

图15:圆点

background: #655;

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

background-size: 30px 30px;

上海时时乐走势图官网 21

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

上海时时乐走势图官网 22

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

总结

透过前段时间对css3的入木七分精晓,发现css3真的很强劲,商讨起来依旧挺有意思的,独有想不到,以为并未有做不到。不过为了促成很炫目的功用,恐怕须求编写制定大量的css代码,这年利用什么技术就必要大家友好来衡量了。

1 赞 6 收藏 评论

上海时时乐走势图官网 23

-

linear-gradient

做活动页面包车型地铁时候大家平常会遇到这样的须要:

顶端的中档一张大banner图片,然后一切区域的背景观要基于图片背景色渐变。就足以行使这几个天性了。

CSS

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

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

上海时时乐走势图官网 24

是否很有意思?其实,linear-gradient还大概有越来越多有意思的效应,你可以依赖上面包车型大巴动图去感受一下:

上海时时乐走势图官网 25

你以为那就完了?等等,还应该有更加强硬的啊!repeating-linear-gradient,来感受一下:

上海时时乐走势图官网 26

linear-gradient再有更抓实硬的职能,举例它能够给成分增加多少个渐变,进而完毕更NB的功能。

shkd

snks

::after

这里拿个大约的例证来看,我们要画三个放大镜,如下图:

上海时时乐走势图官网 27

浅析一下,那几个放大镜能够由多少个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);
}

5、条纹背景

上海时时乐走势图官网 28

图7:  横条纹

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

background-size: 50px;

上海时时乐走势图官网 29

图8:  不等距条纹

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

background-size: 50px;

为了制止每趟改换条纹宽度时都亟需修改四个数字,大家可以从正规找到近便的小路:

若是有些色标到地点值比任何列表中在它前边的色标的地点值都要小,则该色标的职位值会被安装为它这段时间全体色标地点值的最大值。

故而,上边代码能够改为:

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

background-size: 50px;

上海时时乐走势图官网 30

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

斜向条纹:

上海时时乐走势图官网 31

图10

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

background-size: 50px 50px;

上海时时乐走势图官网 32

图11

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

background-size: 50px 50px;

上海时时乐走势图官网 33

图12

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

box-shadow

地点的事例大都以对css3新特性的垂询和认知,那个实例则是有关于建设方案的例证。

  • 急需:大家要贯彻上边这么些效果图(多少个边框:黑灰,深蓝,浅绛红):上海时时乐走势图官网 34
  • 解法一:假若未有css3文化,大家能够做如此做:用八个div,分别设置边框,然后分别调节宽高和职位来到达那个意义。显然,很复杂,这里就不贴代码了。
  • 解法二:今后我们有css3的学问了,借助box-shadow就可以轻便化解那几个主题材料。先来探访它的语法:box-shadow: [x偏移] [y偏移] [阴影模糊宽度] [阴影宽度] [颜色],并且还能够增添多个黑影,使用逗号隔离。上海时时乐走势图官网 35理之当然你还是能够接二连三增加,四重边框,五重边框……都不再是难点呀。别的,还可以加圆角,阴影会贴紧内层div。

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

  • 解法三: 使用outline(只可以协助两重边框)上海时时乐走势图官网 36使用这种方法的缺点就是,只能支持两层的边框,而且还不能根据容器的border-radius自动贴合。

7、伪随机背景

radial-gradient

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

上海时时乐走势图官网 37

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上加了诸八个渐变。

上海时时乐走势图官网 38

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:

上海时时乐走势图官网 39

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

上海时时乐走势图官网 40

图2

那就是说,思量,下图3如此容器中一层紫橄榄绿背景和一道半透明边框的图样,如何演进?

上海时时乐走势图官网 41

图3

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)

4、边框内圆角

要贯彻下边图6效率:

上海时时乐走势图官网 42

图6

只需求以下样式:

background: tan;

border-radius: 20px;

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

outline: 15px solid #655;

一、背景与边

2、多种边框

咱俩都利用过box-shadow

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

而且,能够应用逗号分隔,由此得以创立肆意数量的影子。大家使用那几个本性,能够做出多种边框的功效,如下图4:

上海时时乐走势图官网 43

图4

需求专一的是:投影和边框有所差别,因为它不会影响布局,而且外界shadow不会响应鼠标事件。

在一些情况下恐怕只供给两层边框,这就能够先安装一层常规边框,再加上outline(描边)属性来发出外层的边框。描边的另一个益处是,能够经过outline-offset设置它和要素边缘的间距。可完毕下图5功用:

上海时时乐走势图官网 44

图5

本文由上海时时乐走势图发布于web前端,转载请注明出处:用 CSS3 绘制你要求的几何图形上海时时乐走势图

您可能还会对下面的文章感兴趣: