葡京网投哪个正规 > 新葡亰-前端 > 秋月何时了,前端知识小总结3

原标题:秋月何时了,前端知识小总结3

浏览次数:153 时间:2019-11-30

秋月何时了,CSS3 border-radius知多少?

2015/11/02 · CSS · border-radius

原文出处: 张鑫旭   

用 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

二:

一、必要的CSS属性

1.伪类 ::before & ::after
我们知道可以给 HTML标签添加伪元素,其中::befare、::after能够应用几乎所有的 CSS 属性,也就是说可以通过添加伪元素让一个HTML标签实现3个标签的样式效果,这样可以减少在复杂的 CSS icon 中的标签数量,让HTML结构更简洁。

div

.pseudo{ position:relative; width:150px; height:70px; margin:30px; background:#999; line-height:50px; text-align:center; color:#fff; } .pseudo::before{ content:"::before"; position:absolute; top:-20px; left:-20px; width:70px; height:50px; background:#368fdc; } .pseudo::after{ content:"::after"; position:absolute; bottom:-20px; right:-20px; width:50px; height:50px; background:#de3000; }
2.边框 border
border 是最常用的 CSS 属性,同时它也是在 CSS icon 中使用频率最高的属性,原因在于 border 独特的渲染方式——当改变模盒的高宽与边框的值时,会呈现不同形状。

.triangle_a { width: 30px; height: 30px; border-top: 30px solid #de3000; border-right: 30px solid #ecb400; border-bottom: 30px solid #87bb00; border-left: 30px solid #368fdc; } .triangle_b { width: 0px; height: 0px; border-top: 45px solid #de3000; border-right: 45px solid #ecb400; border-bottom: 45px solid #87bb00; border-left: 45px solid #368fdc; }

通过上面的例子可以看到当宽高度都设为0时, border 会呈现边界斜线,借助这个特性,就可以制作多种多边形:

因为代码较多所以就统一列出:

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>CSS Icon - iinterest</title> <style type="text/css"> /*resize*/ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,input,textarea,p,th,td,menu{ margin:0; padding:0;} body{ font-size:12px; -webkit-text-size-adjust:none; font-family:Arial, Helvetica, sans-serif;} img{ border:none;} ol,ul{ list-style:none;} em{ font-style:normal;} a{ text-decoration:none;} .clearfix{ #zoom:1;} .clearfix:after{ content:' '; display:block; height:0; clear:both; color:#fff;} .big{ width:400px; height:400px; padding:100px;} .css-icon{ padding:10px; clear: both;} .css-icon div{ float:left; margin:20px;} /*梯形*/ .trapezoid { border-bottom: 60px solid #888; border-left: 30px solid transparent; border-right: 30px solid transparent; height: 0; width: 60px; } /*菱形*/ .diamond_narrow { width: 0; height: 0; border: 30px solid transparent; border-bottom: 50px solid #888; position: relative; top: -30px; } .diamond_narrow:after { content: ''; position: absolute; left: -30px; top: 50px; width: 0; height: 0; border: 30px solid transparent; border-top: 50px solid #888; } /*三角形*/ .triangle_down { width: 0px; height: 0px; border-top: 40px solid #888; border-right: 40px solid transparent; border-bottom: 40px solid transparent; border-left: 40px solid transparent; } .triangle_left { width: 0px; height: 0px; border-top: 40px solid transparent; border-right: 40px solid #888; border-bottom: 40px solid transparent; border-left: 40px solid transparent; } .triangle_top { width: 0px; height: 0px; border-top: 40px solid transparent; border-right: 40px solid transparent; border-bottom: 40px solid #888; border-left: 40px solid transparent; } .triangle_right { width: 0px; height: 0px; border-top: 40px solid transparent; border-right: 40px solid transparent; border-bottom: 40px solid transparent; border-left: 40px solid #888; } .triangle_righttop { width: 0px; height: 0px; border-top: 30px solid #888; border-right: 30px solid #888; border-bottom: 30px solid transparent; border-left: 30px solid transparent; } .triangle_rightbottom { width: 0px; height: 0px; border-top: 30px solid transparent; border-right: 30px solid #888; border-bottom: 30px solid #888; border-left: 30px solid transparent; } .triangle_leftbottom { width: 20px; height: 20px; border-top: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 20px solid #888; border-left: 20px solid #888; } .triangle_lefttop { width: 20px; height: 20px; border-top: 20px solid #888; border-right: 20px solid transparent; border-bottom: 20px solid transparent; border-left: 20px solid #888; } </style> </head> <body> <div class="css-icon"> <div class="square"></div> <div class="parallelogram"></div> </div> <!-- border --> <div class="css-icon" style="margin-left:-30px"> <div class="triangle_left"></div> <div class="triangle_down"></div> <div class="triangle_top"></div> <div class="triangle_right"></div> </div> <div class="css-icon"> <div class="triangle_righttop"></div> <div class="triangle_rightbottom"></div> <div class="triangle_leftbottom"></div> <div class="triangle_lefttop"></div> </div> <div class="css-icon"> <div class="trapezoid"></div> <div class="diamond_narrow"></div> </div> </body> </html>

提示:你可以先修改部分代码再运行。

3.圆角 border-radius
也是常用的 CSS3 属性,能帮助我们构造圆形、椭圆形、扇形等基础形状;
border-radius 的语法与margin、padding类似都是遵循上右下左的顺序,缩写方法也一样:
border-radius:10px; border-radius:10px 20px;
当然也可以单独定义一个角:
border-top-right-radius:10px;
同时它也有比较特别的语法:
border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
“/”前是指圆角的水平半径,”/”后是指圆角的垂直半径,并遵循上右下左的顺序。
看下列子:

.circle { width: 80px; height: 80px; background: #888; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; }

.oval { width: 100px; height: 50px; background: #888; -moz-border-radius: 100px / 50px; -webkit-border-radius: 100px / 50px; border-radius: 100px / 50px; }

.egg { display:block; width: 63px; height: 90px; background-color: #888; -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; }

4.变形 transform
制作复杂的 CSS icon 时会经常用到,常用的效果包括:

旋转 rotate
-webkit-transform:rotate(-30deg)
-30deg 表示逆时针旋转30度
45deg 表示顺时针旋转45度

倾斜 skew
-webkit-transform:skew(20deg)
语法与 rotate 相同,通过 skew 实现矩形变平行四边形

缩放 scale
scale 的作用在于当我们需要更改 CSS icon 的尺寸时不用去一个个修改高、宽、边框等属性,直接通过 scale 设置就OK了
-webkit-transform:scale(3, 3);
scale(3,3)的参数中,前一个表示高、后一个表示宽;这句的意思就是高宽都放大3倍,当然也可以设置为scale(1,3)、scale(-3,-3)

一、秋月何时了

这两个月产出有点少,为什么呢?大家都学过「产出守恒定律」,文章产少了,是因为产了其他很屌的东西:
葡京网投哪个正规 17

早就知道女朋友是技术学习的第一阻碍力,现在发现小朋友才是技术学习的Boss级阻碍力。

对了,今天是万圣节,我有必要扮鬼让大家开心一下:
葡京网投哪个正规 18

告诉大家一个秘密,我每天早上就是这么帅醒的。

不过在我们国家,万圣节显得冷冷清清凄凄惨惨戚戚,但是,第11区的人民就热闹多了:
葡京网投哪个正规 19

不知道大家的万圣节是怎么过的,尤其今年恰逢周末。想想我年轻的时候,这样的节日不是加班,就是宅在家里。如果你也是这样,别桑心,没人给你扮鬼,咱们可以自己扮鬼开心下嘛。比如说:单身鬼,穷鬼等等。哟,你突然发现自己……根本就不用扮,直接本色出演就可以了!那……真是太恭喜你了,原来你每天都在过万圣节!葡京网投哪个正规 20 那更应该开心啦! 葡京网投哪个正规 21

今天10月末,过了今天,秋天也算是走到头了,但是,对于前端的学习,路还漫长,今天就说说CSS3 border-radius更深入的一些tips. 本文属于进阶知识点,所以,下面内容不会啰嗦一些基础知识,适合有一定是要经验的小伙伴。

1--Position

二、组合基础形状

通过上面的CSS属性,可以轻松的制作出基础形状,而复杂的形状都是由简单的形状组合来的,下面举几个简单的例子:

1.WIFI

.wifi{ position: relative; top:25px; left:30px; width: 20px; height: 20px; border-right: 9px solid #444; border-top: 9px solid transparent; border-left: 9px solid transparent; border-bottom: 9px solid transparent; border-radius: 100%; border-style: double; -webkit-transform: rotate(-90deg) scale(4, 4); -moz-transform: rotate(-45deg) scale(4, 4); -ms-transform: rotate(-45deg) scale(4, 4); -o-transform: rotate(-45deg) scale(4, 4); transform: rotate(-45deg) scale(4, 4); } .wifi:before{ position: absolute; top:3px; left:3px; content: ""; width: 0; height: 0; border-right: 7px solid #444; border-top: 7px solid transparent; border-left: 7px solid transparent; border-bottom: 7px solid transparent; border-radius: 100%; }
2.型心

.heart { position: relative; width: 100px; height: 90px; } .heart:before, .heart:after { position: absolute; content: ""; left: 50px; top: 0; width: 50px; height: 80px; background: red; -moz-border-radius: 50px 50px 0 0; border-radius: 50px 50px 0 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; } .heart:after { left: 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin :100% 100%; }
3.水滴

.water{ position: relative; width: 212px; height: 100px; } .water:after { content: ""; position: absolute; top: 0; left: 0; width: 60px; height: 60px; border: 20px solid #368fdc; -moz-border-radius: 50px 50px 0 50px; border-radius: 50px 50px 0 50px; -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -ms-transform: rotate(-135deg); -o-transform: rotate(-135deg); transform: rotate(-135deg); }

二、border-radius私有前缀拜拜葡京网投哪个正规 22

还有个把月就2016年了,00后都已经登上历史舞台了,大家都懂我说的意思,浏览器个把年前就把私有前缀给去掉了,现在完全没必要还傻傻使用-webkit-border-radius-moz-border-radius,至少我是早就不使用了,你随意~

属性值:static、fixed、absolute、relative

三、小结

本篇文章主要总结了一些制作 CSS icon 必要的知识,就像搭积木一样,有了基础的形状,剩下的就是发挥想象,运用最少的代码实现想要的 CSS icon,其实 CSS 还有个优势就是应用动画效果,只是在这里没有体现。如果比较感兴趣的话可以看看最后的 CSS icon 资源,里面有不少技巧值得学习。

三、border-radius百分比值

border-radius支持百分比值,例如border-radius:50%. 如果大家看早些年CSS3 border-radius的文档或者文章,会发现,根本就没有提过百分比值这一茬。究其原因,是因为百分比值的支持是后来才支持的,跟数值不是一起出来的。比方说某些老版本的Android机子,border-radius:50%它就不认识。

不过,事情已经过去很多年了,现在大家可以不用在意这些细节了。

OK,大家都知道这个百分比是相对单位,但是,不同属性的百分比值相对的内容是不一样的,对吧,比方说translate是自身,width/height是父级,background-position需要尺寸差计算等。那这里border-radius的百分比值相对的属性是?

我们炒个板栗知道了:

CSS

.radius-test1 { width: 100px; height: 100px; border: 50px solid #cd0000; border-radius: 50%; }

1
.radius-test1 { width: 100px; height: 100px; border: 50px solid #cd0000; border-radius: 50%; }

JavaScript

<div class="radius-test1></div>

1
&lt;div class="radius-test1&gt;&lt;/div&gt;

葡京网投哪个正规 23

哦哦哦哦,我知道了,是相对于元素占据尺寸的百分比(类似jQuery outerWidth()/outerHeight()方法代表尺寸),也就是包含边框,padding后的尺寸。而不是单纯地相对于width/height值。

于是乎,我们要实现一个正方形元素的圆角效果(例如网站头像),一个50%就可以搞定,而无需去计算。

葡京网投哪个正规 24

border-radius还有一个大值特性,也就是值很大的时候,只会使用能够渲染的圆角大小渲染。因此,要实现一个正方形元素的圆角效果(例如网站头像),我们还可以使用一个很大的原教旨,同样是不需要计算的。例如,下面240*240像素图片,我设置圆角大小300px,跟上面效果一样。
葡京网投哪个正规 25

咦?貌似大数值border-radius值好像和50%没什么区别啊?因为上面的图片是正方形,实际上两者区别不小,我们把上面红圈圈例子的height改成200px看看两者对应效果:

CSS

.radius-test2 { width: 100px; height: 200px; border: 50px solid #cd0000; border-radius: 50%; }

1
.radius-test2 { width: 100px; height: 200px; border: 50px solid #cd0000; border-radius: 50%; }

CSS

.radius-test3 { width: 100px; height: 200px; border: 50px solid #cd0000; border-radius: 300px; }

1
.radius-test3 { width: 100px; height: 200px; border: 50px solid #cd0000; border-radius: 300px; }

XHTML

<div class="radius-test2"></div><br>

1
<div class="radius-test2"></div><br>

葡京网投哪个正规 26

XHTML

<div class="radius-test3></div>

1
<div class="radius-test3></div>

葡京网投哪个正规 27

此时,差别就很明显了。上面的长得像马桶盖子, 而后面长得像操场跑道。

葡京网投哪个正规 28

为什么呢?50%成为“马桶盖子”还好理解,宽度和高度分别50%圆角化;但是后面明明圆角300像素,比占据高度需要的圆角大小值要高出不少,为什么还是直的呢?哈哈,实际上就是因为太大了,所以才会变成的“操场跑道”。

没错,因为值大了,要弄清此问题,有必要深入下。不行了,上年纪了,困了,去洗澡睡觉了明天继续。

absolute:脱离文档流,原先的位置会被其他元素占据。top、bottom、left、right用来设置元素的绝对位置,都是相对于浏览器窗口进行移动。top和bottom同时存在时,只有top起作用;如果两者都未指定,则其垂直保持原先位置不变,其顶端与原文档流位置一致。left和right同时存在时,只有left起作用;如果两者都未指定,则其水平保持位置不变,其左边将与原文档流位置一致。

CSS icon 资源:



四、border-radius单值表现深入

由于我们平时使用border-radius绝大多数情况是都单值,例如border-radius: 300px,于是,久而久之可那会忽略这样一个事实,那就是border-radius单值实际上是一种简写。就跟padding:300pxborder-width:300px是一样的,是各个方位等值时候的一种简化书写形式。但是,和一般的可简写CSS属性相比,border-radius要比看上去的复杂的多,表面上是琅琊山伯爵,实际上是当年大梁的贵族少年。

我们将border-radius: 300px还原成其整容前的模样,结果是:

CSS

border-radius: 300px 300px 300px 300px/300px 300px 300px 300px;

1
border-radius: 300px 300px 300px 300px/300px 300px 300px 300px;

我勒个擦,一副把七大姑八大婆都跳出来的即视感,这么这个多~~

葡京网投哪个正规 29

虽然看上去都是300px, 长得好像一样,实际上,表示的含义各不相同,翻译成普通话就是:

CSS

border-radius: 左上角水平圆角半径大小 右上角水平圆角半径大小 右下角水平圆角半径大小 左下角水平圆角半径大小/左上角垂直圆角半径大小 右上角垂直圆角半径大小 右下角垂直圆角半径大小 左下角垂直圆角半径大小;

1
border-radius: 左上角水平圆角半径大小 右上角水平圆角半径大小 右下角水平圆角半径大小 左下角水平圆角半径大小/左上角垂直圆角半径大小 右上角垂直圆角半径大小 右下角垂直圆角半径大小 左下角垂直圆角半径大小;

也就是斜杠前的是水平方向,斜杠后面的是垂直方向。

虽然border-radiusborder-width/border-color等都是border打头的,但是,两者缩写与方位的表示确实不一样的。传统的边框属性border四个值分别表示上边框,右边框,下边框,左边框。但是,border-radius指的则是角落,所以,我们眼睛的关注点,需要移动下,从边框到角落(如下图所示)(每个方位都如此逆时针移动)。

葡京网投哪个正规 30

都是最多4个值,1~3个缩写的规则也是一样的(一个是边,一个是角),不赘述。

那上面提到的“水平/垂直”又是什么鬼呢?

对于正圆,我们基本上很少提“水平半径”和“垂直半径”,因为,半径都是一样长。但是,对于标准椭圆,那就不一样了,因为存在最长半径和最小半径。在web中,圆角的水平半径指的就是椭圆的水平半径,垂直半径就是椭圆下图所示的垂直半径:
葡京网投哪个正规 31

一个水平半径和一个垂直半径所夹起的那1/4段圆弧就是我们平时看的的圆角呈现,如下变色显示:

葡京网投哪个正规 32

demo
一例胜千图,为了方便大家感受下八大婆的具体行为,我特意紧承上面的例子,制作了个可操作的实时圆角和代码的例子。

您可以狠狠地点击这里:CSS3 border-radius圆角各个属性值作用demo

葡京网投哪个正规 33

OK, 为了演示水平垂直半径,我们现在先重置0,然后让水平1和垂直1都是300像素,如下图所示:
葡京网投哪个正规 34

大家会看到,左上角出现了圆弧,那这个圆弧是怎么来的呢?我们画个圈圈辅助下~

葡京网投哪个正规 35

葡京网投哪个正规 36

大家发现没,原本设置的是300像素*300像素,结果最后显示的却是200像素*200像素半径下的圆弧效果,这显然不符合认知啊!!

实际上是这样的,CSS3圆角除了大值特性,还有一个等比例特性,就是水平半径和垂直半径的比例是恒定不变的。

回到上面例子,由于我们的元素占据宽度200像素,高度300像素。所以,根据大值特性,水平方向的300像素只能按照200像素半径渲染;再根据等比例特性,虽然垂直方向理论上的最大半径是300像素,但是受制于当初设定的300px*300px1:1比例,垂直方向最终渲染的半径大小也是200像素。于是,我们最后得到的只是一个200像素*200像素的圆弧。

第三节末尾所提到的“反而因为值设大了”就是指的这个。

可能有人会疑问,那该如何设置才能实现等同于border-radius:50%的效果呢。哈哈,如果你理解了上面的内容,其实就很简单了,最关键的一点就是比例关系。我们的元素占据的尺寸是200像素*300像素。所以,只要让水平半径和垂直半径保持2:3的比例就可以了,然后,可以利用“大值特性”设一个你认为安全的值就可以了。

比方说2倍尺寸border-radius: 400px/600px, 如下代码和效果:

CSS

.radius-test4 { width: 100px; height: 200px; border: 50px solid #cd0000; border-radius: 400px/600px; }

1
.radius-test4 { width: 100px; height: 200px; border: 50px solid #cd0000; border-radius: 400px/600px; }

XHTML

<div class="radius-test4"></div>

1
<div class="radius-test4"></div>

葡京网投哪个正规 37

是不是搞明白原理之后,之前晕头转向的表现是不是分分钟就理解了哈!

relative:依然存在于文档流中,其他元素按原先位置不会抢占其位置。top、bottom、left、right用来设置元素的相对位置,同样相对于元素原先位置进行移动。top和bottom同时存在时,只有top起作用。left和right同时存在时,只有left起作用。

五、border-radius与图形构建

border-radius支持的可变值足有八个(在本文戏称为八大婆,简称八婆),基本上,每一个值的变化,都会呈现不同的图形,例如,下面这样,我东拖拖,西拖拖,拖出了个英文字母D:

葡京网投哪个正规 38

或者我们可以只留一个方向或2侧的边框,可以拉出一些惊喜的效果,如下gif截图:
葡京网投哪个正规 39

诸如很多的,就看你的脑洞和技术了。

本身CSS的border属性就可以构建三角,梯形等等,现在,再配合多变的border-radius,我们可以发挥的空间就更大了。但是,要想用得得心应手,还是需要深入理解border-radius的各个表现。

one-div上就有些图标就是利用了border-radius实现的,大家有兴趣可以瞅瞅,看看人家怎么巧妙使用border-radius的,目的在于学习理解border-radius,倒不是效果本身。知其根本自然上层信手拈来。

ps:absolute状态下,如果父级元素的position属性值为relative,则上述的相对浏览器窗口定位将会变成相对父对象定位。

插一下

对了,写摘要是突然想起来。有时候我们想使用透明边框优雅增加元素的点击区域,此时的圆角大小值需要把透明边框的宽度也计算在内。例如,希望圆角2像素,结果外面扩展了2像素的透明边框;此时,实际设置的border-radius值应该是4px.

插一下 × 2
哦,还有……妹的,忘记说了,本来是个独立段落,算了,简单说下吧。就是我们可以单独指定border-radius某个角落的圆角大小,如border-top-left-radius: 40px这个不少同学都知道。但是,大家不一定知道:

  1. 支持最多两个值,必须使用空格分隔。分别表示水平半径和垂直半径。而border-radius那种斜杠/分隔的写法这里是不支持的,只能是空格。
  2. 中间两个方位关键字,如top/left的前后顺序不能改变,否则会被认为是不合法(可参见下面的测试)。top/bottom表示垂直方向的在前面, left/right表示水平方向的在右边。全部写法示意:
CSS

.radius { border-top-left-radius: 200px 100px;
border-top-right-radius: 200px 100px; border-bottom-left-radius:
200px 100px; border-bottom-right-radius: 200px 100px; }

<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-5b8f6d14d6e87024068266-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d14d6e87024068266-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f6d14d6e87024068266-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d14d6e87024068266-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f6d14d6e87024068266-5">
5
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d14d6e87024068266-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-5b8f6d14d6e87024068266-1" class="crayon-line">
.radius {
</div>
<div id="crayon-5b8f6d14d6e87024068266-2" class="crayon-line crayon-striped-line">
  border-top-left-radius: 200px 100px;
</div>
<div id="crayon-5b8f6d14d6e87024068266-3" class="crayon-line">
  border-top-right-radius: 200px 100px;
</div>
<div id="crayon-5b8f6d14d6e87024068266-4" class="crayon-line crayon-striped-line">
  border-bottom-left-radius: 200px 100px;
</div>
<div id="crayon-5b8f6d14d6e87024068266-5" class="crayon-line">
  border-bottom-right-radius: 200px 100px;
</div>
<div id="crayon-5b8f6d14d6e87024068266-6" class="crayon-line crayon-striped-line">
}
</div>
</div></td>
</tr>
</tbody>
</table>

上面2点一综合,就可以得到如下的记忆公式:border-垂直-水平-radius: 水平 垂直

没错!前面的方位关键字和后面的半径方位不匹配!不匹配!不匹配!正好反的!

另外,偶们都不是天才,时间久了会记不得到底是垂直在前,还是水平在前。告诉大家一个一定不会记错的方法,罗永浩不是有个锤子手机吗?

葡京网投哪个正规 40

垂直在前 → 锤子在前。

OK,下面我们来测试下前面提到的不能修改方位关键字的顺序,也就是不能border-left-top-radius

JavaScript

.radius-test5 { width: 100px; height: 100px; border: 50px solid #cd0000; border-top-left-radius: 200px 100px; } .radius-test6 { width: 100px; height: 100px; border: 50px solid #cd0000; <del>border-left-top-radius: 200px 100px;</del> }

1
2
.radius-test5 { width: 100px; height: 100px; border: 50px solid #cd0000; border-top-left-radius: 200px 100px; }
.radius-test6 { width: 100px; height: 100px; border: 50px solid #cd0000; <del>border-left-top-radius: 200px 100px;</del> }

XHTML

<div class="radius-test5"></div>

1
<div class="radius-test5"></div>

 

XHTML

<div class="radius-test6"></div>

1
<div class="radius-test6"></div>

显然,上面还是方方正正,直接嗝屁了。所以,记住,「锤子在前」!

真正的结语
欢迎其他同行补充关于border-radius其他你认为有意思的事情;文中若有表述不准确的地方,也欢迎大力指正。

葡京网投哪个正规 41

 

1 赞 6 收藏 评论

葡京网投哪个正规 42

 

2--Float

属性值left/right/none/inherit,布局而非定位

 

3--如何消除浮动

²  先说浮动的副作用:浮动会使当前标签产生向上浮的效果,同时影响前后标签、父级标签的位置及 width height 属性。背景不能显示/边框不能撑开/margin/padding设置值不能正常显示。

²  清除浮动方法:

  • 使用设置高度样式(给父元素设置高度),清除浮动产生,前提是对象内容高度要能确定并能计算好.

    <style type="text/css">
    .div1{background-color: #DDDDDD;border:1px solid red;/解决代码*/*height:200px;}
    .div2{background-color: cyan;border:1px solid red;height:100px;margin-top:10px}
    .left{float:left;width:20%;height:200px;background-color: blue}
    .right{float:right;width:30%;height:80px;background-color: blueviolet}
</style>
<div class="div1">
    <div class="left">Left</div>
    <div class="right">Right</div>
</div>
<div class="div2">
    div2
</div>

 

  • Ø  结尾处加空div标签clear:both清除浮动,应用该样式,缺点产生无意义标签。

    <style type="text/css">
    .div1{background-color: #DDDDDD;border:1px solid red}
    .div2{background-color: cyan;border:1px solid red;height:100px;margin-top:10px}
    .left{float:left;width:20%;height:200px;background-color: blueviolet}
    .right{float:right;width:30%;height:80px;background-color: chartreuse}
    /清除浮动代码*/
   * .clearfloat{clear:both}
</style>
<div class="div1">
    <div class="left">Left</div>
    <div class="right">Right</div>
    <div class="clearfloat"></div>
</div>
<div class="div2">
    div2
</div>

 

  • Ø  父级div定义overflow:hidden或者overflow:auto,可以清除父级内产生的浮动。overflow:hidden让父元素紧贴内容,即可紧贴其对象内容,包括浮动的元素,从而可以清除浮动。

    <style type="text/css">
        .div1{background-color: #DDDDDD;border:1px solid red;/解决代码*/*width:98%;overflow:hidden}
        .div2{background-color: cyan;border:1px solid red;height:100px;margin-top:10px;width:98%}
        .left{float:left;width:20%;height:200px;background-color: blueviolet}
        .right{float:right;width:30%;height:80px;background-color: antiquewhite}
    </style>
<div class="div1">
    <div class="left">Left</div>
    <div class="right">Right</div>
</div>
<div class="div2">
    div2
</div>

Ps:必须定义width或zoom:1,同时不能定义height,使用overflow:hidden时,浏览器会自动检查浮动区域的高度

  • 父级元素定义伪类:after和zoom:

    <style type="text/css">
    .div1{background-color: cyan;border:1px solid red;}
    .div2{background-color: blanchedalmond;border:1px solid    red;height:100px;margin-top:10px}
    .left{float:left;width:20%;height:200px;background-color: blueviolet}
    .right{float:right;width:30%;height:80px;background-color: deeppink}
    /清除浮动代码*/
   * .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
    .clearfloat{zoom:1}//浏览器兼容
</style>
<div class="div1 clearfloat">
    <div class="left">Left</div>
    <div class="right">Right</div>
</div>
<div class="div2">
    div2
</div>

  Ps:利用:after和:before来在元素内部插入两个元素块,从面达到清除浮动的效果。利用其伪类clear:after在元素内部增加一个类似于div.clear的效果

  • 父元素浮动
  • 父元素绝对定位

 

4--自适应布局

Css:

Width:calc(100%-100px);

Height:calc(100%-100px)

Absolute、relative

position:top、left、bottom

5--px、em、rem

px单位名称为像素,固定值

em单位名称为相对长度单位,相对值,相对于父元素,若父元素没有设置大小,则相对于默认字体大小。会继承父级元素字体大小。

rem:相对值,相对于HTML根元素

ps:浏览器默认字体高16px,未经调整的浏览器符合:1em=16px;

重写:

1. body选择器中声明Font-size:62.5%; 
2. 将你的原来的px数值除以10,然后换上em作为单位;

 

6--meta

<meta> 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。<meta> 标签位于文档的头部,不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。

meta标签分两大部分:http-equiv和name变量。

Content为其必需属性,而http-equiv、name、scheme为其可选属性。

使用带有 http-equiv 属性的 <meta> 标签时,服务器将把名称/值对添加到发送给浏览器的内容头部。

content 属性始终要和 name 属性或 http-equiv 属性一起使用。

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

Ps:

 

7--过渡transition、动画transform、渐变(gradient)、圆角(border-radius)、阴影(text-shadow)、动画(animation)

Transition:让元素从一种样式过渡到另一种样式。需要考虑两点,即希望效果作用在哪个css属性上、效果的时长。

触发方式:hover、active、focus、@media、onclick

eg.过渡效果应用于宽度属性,时长2秒

div{

transition: width 2s;

-moz-transition: width 2s;    /* Firefox 4 */

-webkit-transition: width 2s;               /* Safari 和 Chrome */

-o-transition: width 2s;         /* Opera */         }

div:hover{

  width:300px;   //开始样式设定为非300px。

}

Ps:若向多个样式添加过渡效果,可以通过添加多个属性实现,属性间用逗号隔开。若对一个属性进行应用效果,则属性值间直接用空格隔开。

div{

transition: width 2s, height 2s, transform 2s;

-moz-transition: width 2s, height 2s, -moz-transform 2s;

-webkit-transition: width 2s, height 2s, -webkit-transform 2s;

-o-transition: width 2s, height 2s,-o-transform 2s;    }

 

div{

transition-property: width;

transition-duration: 1s;

transition-timing-function: linear;

transition-delay: 2s;

-moz-transition-property:width;    /* Firefox 4 */

-moz-transition-duration:1s;

-moz-transition-timing-function:linear;

-moz-transition-delay:2s;

-webkit-transition-property:width;   /* Safari 和 Chrome */

-webkit-transition-duration:1s;

-webkit-transition-timing-function:linear;

-webkit-transition-delay:2s;

-o-transition-property:width;    /* Opera */

-o-transition-duration:1s;

-o-transition-timing-function:linear;

-o-transition-delay:2s;     }        等价于

div{

transition: width 1s linear 2s;

-moz-transition:width 1s linear 2s; /* Firefox 4 */

-webkit-transition:width 1s linear 2s; /* Safari and Chrome */

-o-transition:width 1s linear 2s;} /* Opera */

 

transform:transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转(rotate)、缩放(scale)、移动(translate)或倾斜(skew)。

translate(x,y)定义2D转换           translate3d(x,y,z)定义3D转换

translateX(x) 定义转换,只是用X轴的值

translateY(y) 定义转换,只是用Y轴的值

translateZ(z) 定义转换,只是用Z轴的值

 

2D转换:使元素改变形状、尺寸和位置的一种效果,其方法有:translate()、rotate()、scale()、skew()、matrix()、

translate()方法,元素从其当前位置根据x、y坐标进行移动

div{

transform: translate(50px,60px);

-ms-transform: translate(50px,60px);          /* IE 9 */

-webkit-transform: translate(50px,60px);      /* Safari and Chrome */

-o-transform: translate(50px,60px);           /* Opera */

-moz-transform: translate(50px,60px);                  /* Firefox */

}

rotate()方法,元素根据指定的角度按顺时针方向进行旋转,若给定角度为负数,则按逆时针方向旋转

div{

transform: rotate(60deg);

-ms-transform: rotate(60deg);                 /* IE 9 */

-webkit-transform: rotate(60deg);    /* Safari and Chrome */

-o-transform: rotate(60deg);                  /* Opera */

-moz-transform: rotate(60deg);                /*葡京正网网投, Firefox */

}

scale()方法,元素大小根据缩放参数增加或减小

div{

transform: scale(2,3);//2表示宽度为原的2倍,高度为原3倍

-ms-transform: scale(2,3);  /* IE 9 */

-webkit-transform: scale(2,3);       /* Safari 和 Chrome */

-o-transform: scale(2,3);   /* Opera */

-moz-transform: scale(2,3); /* Firefox */

}

skew()方法,元素根据翻转角度进行放置

div{

transform: skew(10deg,20deg);//把元素沿x轴翻转10度,y轴翻转20度

-ms-transform: skew(10deg,20deg);    /* IE 9 */

-webkit-transform: skew(10deg,20deg);         /* Safari and Chrome */

-o-transform: skew(10deg,20deg);     /* Opera */

-moz-transform: skew(10deg,20deg);   /* Firefox */

}

matrix()方法,把所有2D转换方法组合在一起,需要6个参数

3D转换:使元素改变形状、尺寸和位置的一种效果,其方法有:rotateX()、rotateY()

rotateX()方法,元素围绕x轴以给定的角度进行旋转

div{

transform: rotateX(120deg);

-webkit-transform: rotateX(120deg);  /* Safari 和 Chrome */

-moz-transform: rotateX(120deg);     /* Firefox */

}

rotateY()方法,元素围绕y轴以给定度数进行旋转

div{

transform: rotateX(120deg);

-webkit-transform: rotateX(120deg);  /* Safari 和 Chrome */

-moz-transform: rotateX(120deg);     /* Firefox */

}

 

渐变(gradient)、                        

  Mozilla内核下的线性/径向渐变:

-moz-linear-gradient(top,#ccc,#000);其中,第一个参数表示线性渐变的方向,top是从上到下,left是从左到右,left top则是从左上角到右下角的方向;第二个与第三个参数分别是起点颜色和终点颜色,中间可以插入多种颜色表示多种颜色的渐变。(firefox)。

background: -moz-radial-gradient(#ccc,#000,blue);

background: -moz-radial-gradient(#ccc 5%,#000 25%,blue 50%);

 

      <style type="text/css">
       .example{
           width:160px;
           height: 80px;
       }
      .e1{
          background: -moz-linear-gradient(top,#ccc,#000);
          /该效果只在Mozilla内核下才能正常显示,即firefox浏览器可运行*/     * }
    </style>
<div class="example e1"></div>

  Webkit内核下的线性/径向渐变:-webkit-linear-gradient(top,#ccc,#000);其中,

-webkit-gradient(linear,left top,left bottom,from(#ccc), to(#000));其中,第一个参数表示渐变类型,linear或radial供选择;第二个参数和第三个参数,都是一对值,分别表示渐变起点和终点;第四个和第五个参数分别是color-stop函数,第一个表示渐变的位置,0为起点,0.5为中点,1为结束点,第二个表示该点的颜色。(chrome或Safari)。background: -webkit-radial-gradient(red,#ccc,#000); 

background: -webkit-radial-gradient(red 5%,#ccc 25%,#000 50%);

 

    <style type="text/css">
        .e1{
            width:160px;
            height: 80px;
      /  background:  -webkit-gradient(linear,0 0,100 100,from(#ccc), to(#000));*/
             * background: -webkit-linear-gradient(top,#ccc,#000); }
    </style>
<div class="e1"></div>

 Opera下的线性渐变:-o-linear-gradient(top,#ccc,#000);第一个参数表示线性渐变的方向,top从上到下,left从左到右,left top从左上角到右下角;第二个参数和第三个参数分别是起点颜色和终点颜色,中间可以插入多种颜色。

<style type="text/css">
        .e1{
            width:160px;
            height: 80px;
            border:1px solid red;
            background: -o-linear-gradient(left,#ccc,#000);

/*Opera44不支持gradient????*/
        }
    </style>
<div class="e1"></div>

  Trident(IE)下的渐变:IE依靠滤镜实现渐变。filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=”#000”,endColorstr=”#000”);

 

圆角(border-radius):用于设置圆角边框,可以选择px、em或者%

  <style type="text/css">
       .div1{
           width:100px;
           height:200px;
           border-radius: 50px;
           background-color: orangered;
       }
    </style>
<div class="div1"></div>

border-radius:300px;

border-radius: 300px 300px 300px 300px/300px 300px 300px 300px;

border-radius: 左上角水平圆角半径大小 右上角水平圆角半径大小 右下角水平圆角半径大小 左下角水平圆角半径大小/左上角垂直圆角半径大小 右上角垂直圆角半径大小 右下角垂直圆角半径大小 左下角垂直圆角半径大小;

 

阴影(text-shadow、 box-shadow):text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果。

 

box-shadow属性向框中添加一个或多个阴影。其参数为:h-shadow(必需u,水平阴影的位置)、v-shadow(必需,垂直阴影的位置)、blur(可选,模糊距离)、spread(可选,阴影的尺寸)、color(可选,阴影的颜色)、inset(可选,将外部阴影改为内部阴影)

ps:非零值的border-radius会以相同的作用影响阴影的外形。

    <style type="text/css">
        .demo1{
            width:100px;
            height:100px;
            background-color:blanchedalmond;
    /     box-shadow:-2px 0 15px green,0 -2px 5px blue,0 2px 5px red,2px 0 5px yellow;*/
         /*  box-shadow:0 0 0 1px red;*/
           * box-shadow:inset 0 0 6px red;
        }
    </style>
<div class="demo1"></div>

 

text-shadow:向文本设置阴影,其属性值有h-shadow(必需,水平阴影的位置)、v-shadow(必需,垂直阴影的位置)、blur(可选,模糊的距离)、color(可选,阴影的颜色)   text-shadow: x偏移 y偏移 blur color;blur指模糊半径。

    <style type="text/css">
        .p1{
            text-shadow:20px 20px 2px red;
        }
    </style>
<div class="p1"><p>一切如愿一切顺利</p></div>

 

动画(animation):其参数有:name(指定要绑定到选择器的关键帧的名称)、duration(动画指定需要多少秒或毫秒完成)、timing-function(设置动画将如果完成一个周期)、delay(设置动画在启动前的延迟间隔)、iteration-count(定义动画的播放次数)、direction(指定是否应该轮流反向播放动画)、fill-mode(规定动画不播放时要应用到元素的样式)、play-state(指定动画是否正在运行或已暂停)

 

animation通过keyframes属性实现动画效果,命名由@keyframes开头,后面紧跟动画的名称,加{},{}中为一些不同时间段的样式规则,以%为单位。其中动画的名称与animation中的关键帧的名称要一致!样式规则由多个百分比构成,分别给每一个百分比中需要有动画效果的元素添加不同的属性,从而达到一种不断变化的效果,如移动、改变元素颜色、位置、大小、形状等。可以使用“from”、“to”表示一个动画从哪开始到哪结束。

 

Ps:animation-timing-function为控制时间的属性,其值有linear、ease、ease-in、ease-out、ease-in-out、cubic-bezier(n,n,n,n)、steps()。

 

animation默认以ease方式过渡,它会在每个关键帧之间插入补间动画,因此动画效果是连贯性的。linear、cubic-bezier的过渡函数也会为其插入补间。如果遇到不需要补间的效果,只需要关键帧间的跳跃可选择steps过渡方式。

 

linear实现的是线性变化,即从一个状态过渡到另一个状态;而steps没有过渡效果,而是一帧帧的变化。steps函数指定了一个阶跃函数,第一个参数表示时间函数中的间隔数量num,第二个参数可选,start和end指示在每个间隔的起点或终点发生阶跃变化,默认为end。step-start等同于steps(1,start),动画分成1步,动画执行时为开始左侧端点的部分为开始;step-end等同于steps(1,end),动画分成一步,动画执行时以结尾端点开始。num指示每两个关键帧间的变化次数,即类似0%到25%间变化5次,而不是整个动画。Step-start在变化过程中,以下一帧的显示效果来填充间隔动画;step-end以上一帧的显示效果来填充动画。

()

 

 

  @keyframes name{

 

   From {

 

  Properties:Properties value;

 

}

 

Percentage {

 

    Properties:Properties value;

 

}

 

to {

 

  Properties:Properties value;

 

}

 

}

 

或者

 

@keyframes name {

 

 0% {

 

  Properties:Properties value;

 

}

 

Percentage {

 

  Properties:Properties value;

 

}

 

100% {

 

  Properties:Properties value;

 

}

 

}

 

eg.

 

  <style>
        div
        {
            width:100px;
            height:100px;
            background:red;
            position:relative;
            animation:mymove 5s infinite;
            -webkit-animation:mymove 5s infinite; /Safari and Chrome*/
        }
        @keyframes mymove
        {
            from {left:0px; background-color: #00CCCC;top:0px;}
            25%  {left:50px;background-color: #cccccc ;top:20px;}
            50%  {left:100px; background-color: #60cb1b;top:0px;}
            75% {left: 150px;background-color: blueviolet;top:20px}
            to {left:200px; background-color: #cd0000;top:0px;}
        }
        @-webkit-keyframes mymove
/*Safari and Chrome*葡京网投哪个正规,/
       * {
            from {left:0px; background-color: #00CCCC;top:0px;}
            25%  {left:50px;background-color: #cccccc ;top:20px;}
            50%  {left:100px; background-color: #60cb1b;top:0px;}
            75% {left: 150px;background-color: blueviolet;top:20px}
            to {left:200px; background-color: #cd0000;top:0px;}
        }
    </style>
<div></div>

本文由葡京网投哪个正规发布于新葡亰-前端,转载请注明出处:秋月何时了,前端知识小总结3

关键词:

上一篇:没有了

下一篇:文本相关,优雅设置网页文字字体