秋月何时了,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

二:

一、秋月何时了

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

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

对了,今天是万圣节,我有必要扮鬼让大家开心一下:
图片 18

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

不过在我们国家,万圣节显得冷冷清清凄凄惨惨戚戚,但是,第11区的人民就热闹多了:
图片 19

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

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

1–Position

二、border-radius私有前缀拜拜图片 22

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

属性值:static、fixed、absolute、relative

三、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,跟上面效果一样。
图片 24

咦?貌似大数值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起作用;如果两者都未指定,则其水平保持位置不变,其左边将与原文档流位置一致。

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

图片 16

 

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;

发表评论

电子邮件地址不会被公开。 必填项已用*标注