css3属性之border-radius

最新推荐文章于 2022-08-14 19:27:05 发布

Crazier_qi

最新推荐文章于 2022-08-14 19:27:05 发布

阅读量756

点赞数

分类专栏： css3

本文链接：https://blog.csdn.net/github_33261002/article/details/51194025

版权

css3 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

css3中有一个非常好用的新属性：border-radius用来实现圆角

我们知道在网页中有很多图片样式棱角分明，如果为元素添加圆角属性看起来效果会更舒服

border-radius是一个简写属性，它是由四个属性组成的：

用于设置四个border-*-radius属性：

border-top-left-radius:<length> <length>;//左上角
border-top-right-radius:<length> <length>;//右上角
border-bottom-right-radius:<length> <length>;//右下角
border-bottom-left-radius:<length> <length>;//左下角

第一个<length>参数是圆角水平半径，第二个值是垂直半径，如果第二个值省略，那么就等于第一个值。

例如：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div{
			width: 100px;
			height: 100px;
			background-color: red;
			border-radius: 20px;
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

效果如图：

radius，就是半径的意思。用这个属性可以很容易做出圆角效果，当然，也可以做出圆形效果。原理很简单，“正方形的内切圆的半径等于正方形边长的一半”。下面就做一个红色的圆。

还是上面的代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div{
			width: 100px;
			height: 100px;
			background-color: red;
			border-radius: 50px;
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

是不是很容易就实现了一个图形切割为圆形呢！

百分之百的正方形切割就像上面的方式很容易实现，设置border-radius:50%;即可

接下来再看看怎样讲一个方形图片切割变为圆形~

先来看看实现方式及效果图：

<span style="font-size:14px;"></span>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.Avatar{
            position:relative;
            width:100px;
            height:100px;
            overflow:hidden;
            border-radius:50%;
            }

        .Avatar img{
            width:100%;
            height:100%;
            }
	</style>
</head>
<body>
	<div class="Avatar"><img src="1.jpg" alt=""></div>
</body>
</html>

当然了，原图大小为1300*958；如果单纯的用上面设置border-radius:50%的方式当然是不行的

所以，首先我们渲染一个圆形，必须得以圆形图片为基础

要解决这个问题，我们可以通过在img标签外面套一层div，然后我们通过将超过这个外层div的img标签的内容给裁掉来实现。具体的话可以通过将外层div的overflow属性设置为hidden。

对应于.Avatar样式

接下来就是将img图片等比例缩小100%显示啦~

这种方式并没有裁剪图片主要内容，网上还有另外一种裁剪长方形图片的实现方式，不过分垂直方向与水平方向裁剪，并且会裁剪掉图片部分内容。再次附上链接方便学习，共同交流~

链接：css剪切圆形图片

接下来看看border-radius在不同内核浏览器下的书写格式：

1、Mozilla(Firefox, Flock等浏览器)

 -moz-border-radius-topleft: //左上角
  -moz-border-radius-topright: //右上角
  -moz-border-radius-bottomright: //右下角
  -moz-border-radius-bottomleft: //左下角
   
   等价于：

  -moz-border-radius: //简写

2、WebKit (Safari, Chrome等浏览器)

 -webkit-border-top-left-radius:  //左上角
  -webkit-border-top-right-radius:  //右上角
  -webkit-border-bottom-right-radius:  //右下角
  -webkit-border-bottom-left-radius:  // 左下角

   等价于：

  -webkit-border-radius:  //简写

3、Opera浏览器：

 border-top-left-radius: //左上角
  border-top-right-radius: //右上角
  border-bottom-right-radius: //右下角
  border-bottom-left-radius: //左下角
  
  等价于：
 
  border-radius: //简写

4、Trident (IE)

IE<9不支持border-radius;IE9下没有私有格式，都是用border-radius，其写法和Opera是一样的，这里就不在重复。

为了不管是新版还是老版的各种内核浏览器都能支持border-radius属性，那么我们在具体应用中时需要把我们的border-radius格式改成：

  -moz-border-radius: none | <length>{1,4} [/ <length>{1,4} ]?
  -webkit-border-radius: none | <length>{1,4} [/ <length>{1,4} ]?
  border-radius: none | <length>{1,4} [/ <length>{1,4} ]?

再次附上一个讲的比较全面的链接：点击打开链接

最后再附上一个利用border-radius属性做的奥运五环~

<span style="font-size:14px;"><!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="UTF-8" /> 
        <title>The Olympic Flag</title>  
        <style type="text/css" media="screen"> 
        body {
            margin:20px;
            background-color:#efefef;
        }
        ul.flag {
            list-style-type:none;
            position: relative;
            margin: 20px auto;
        } 
      
        .flag li, .flag li:before, .flag li:after {
            -webkit-border-radius: 6em;
            -moz-border-radius: 6em;
            border-radius: 6em;
            position: absolute;
        }
        
        .flag li {
            width: 12em;
            height: 12em;
            left: 0;
            top: 0;
            font-size: 1em;
        }  
      
        .flag li:after {
            display: block;
            content: "";
            top: -0.1em;
            left: -0.1em;
            right: -0.1em;
            bottom: -0.1em;
            border: solid 1.4em black;
        }
        
        .flag .blue   { z-index: 10; left: 0; top: 0; }
        .flag .yellow { z-index: 20; left: 6.8em;  top: 5.7em; }
        .flag .black  { z-index: 21; left: 13.6em; top: 0; }
        .flag .green  { z-index: 20; left: 20.4em; top: 5.7em; }
        .flag .red    { z-index: 10; left: 27.2em; top: 0px; }   
        
        .flag .blue:after   { border-color: blue; }   
        .flag .yellow:after { border-color: yellow; } 
        .flag .black:after  { border-color: black; }
        .flag .green:after  { border-color: green; } 
        .flag .red:after    { border-color: red; }
        /* 蓝色压住黄色 */  
        .flag .blue.alt { z-index: 24; }
        .flag .blue.alt, 
        .flag .blue.alt:before, 
        .flag .blue.alt:after {
            border-top-color: transparent;
            border-left-color: transparent;
            border-bottom-color: transparent;
        }
        /* 黄色压住黑色 */
        .flag .yellow.alt { z-index: 23; }
        .flag .yellow.alt, 
        .flag .yellow.alt:before, 
        .flag .yellow.alt:after {
            border-right-color: transparent;
            border-left-color: transparent;
            border-bottom-color: transparent;
        }    
        /* 绿色压住黑色  */
        .flag .green.alt { z-index: 23; }
        .flag .green.alt,
        .flag .green.alt:before,
        .flag .green.alt:after {
            border-top-color: transparent;
            border-right-color: transparent;
            border-bottom-color: transparent;
        }
        /* 红色压住绿色  */
        .flag .red.alt { z-index: 23; }
        .flag .red.alt, 
        .flag .red.alt:before,
        .flag .red.alt:after {
            border-top-color: transparent;
            border-right-color: transparent;
            border-left-color: transparent;
        }       
        </style>   
    </head> 
    <body> 
        <ul class="flag"> 
            <li class="blue"></li> 
            <li class="blue alt"></li> 
            <li class="yellow"></li> 
            <li class="yellow alt"></li> 
            <li class="black"></li> 
            <li class="green"></li> 
            <li class="green alt"></li> 
            <li class="red"></li> 
            <li class="red alt"></li> 
        </ul>  
    </body> 
</html></span>

更多的圆角border-radius属性特效等你们来实现哦~

Crazier_qi

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css3属性之border-radius

css3中有一个非常好用的新属性：border-radius用来实现圆角我们知道在网页中有很多图片样式棱角分明，如果为元素添加圆角属性看起来效果会更舒服border-radius是一个简写属性，它是由四个属性组成的：用于设置四个border-*-radius属性：border-top-left-radius: ;//左上角border-top-right-radius: ;
复制链接

扫一扫