CSS3 border-radius 属性

border-radius介绍：
border-radius可以给块级元素和行内块元素设置圆角,属性的值可以写像素、百分比、简写像素,要想border-radius属性生效,标签必须有大小。
案例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {margin: 40px auto;width: 400px;height: 400px;background-color: red;/*给元素指定半径大小*/border-radius: 50%;}</style>
</head><body><div></div>
</body></html>

实现效果：

border-radius更多写法:

1.指定4个角的圆角边距,表示取宽度和高度的一半。
border-radius:50%;
2.指定4个角的圆角边距,表示取精确单位作为圆角边距。
border-radius:30px;
3.第一个值代表,左上和右下圆角大小相同,第二个值代表右上和左下角大小相同
border-radius: 30px 20px;
4.有三个值,第一个值代表左上角,第二个值代表右上角和左下角,第三个值代表右下角
border-radius: 30px 20px 10px
5.有四个值,他们分别代表左上角、右上角、右下角、左下角
border-radius：20px 25px 30px 35px;
上面五个属性都是简写属性
6.单独设置左上角圆角边距
border-top-lefr-radius:30px;
7.单独设置右上角圆角边距
border-top-right-radius: 30px;
8.单独设置右下角圆角边框
border-bottom-right-radius: 30px；
9.单独设置左下角圆角边框
border-bottom-left-radius: 30px;

CSS3 border-radius 属性相关推荐

如何使用CSS3 Border Radius属性
With CSS3, you can give any element "rounded corners" by using the border-radius property. ...
巧用 CSS3 filter(滤镜) 属性
原文链接:CSS3 filter(滤镜) 属性效果预览 filter: grayscale(100%); 定义和使用 filter 属性定义了元素(通常是<img>)的可视效果(例如:模 ...
CSS盒子模型之CSS3可伸缩框属性（Flexible Box）
CSS盒子模型(下) 一．CSS3可伸缩框(Flexible Box) 可伸缩框属性(Flexible Box)是css3新添加的盒子模型属性,有人称之为弹性盒模型,它的出现打破了我们经常使用的浮动布 ...
css3 filter url,CSS3 filter(滤镜) 属性
CSS3 filter(滤镜) 属性实例修改所有图片的颜色为黑白 (100% 灰度): img { -webkit-filter: grayscale(100%); /* Chrome, Safa ...
box-sizing是CSS3的box属性
box-sizing是CSS3的box属性之一.一说到CSS的盒模型(Box model)我想很多人都会比较烦,特别是对于新手,然而这个Box model又是我们CSS运用中比较重要的一个属性.那么C ...
CSS3之background属性
background: 作用: 在一个声明中设置所有的背景属性说明: 可以设置的属性分别是:background-color, background-posi ...
CSS3之text属性
color: 作用: 指定文本的颜色说明: 该属性在块.行内.行内块的样式表中都可以使用,改变被控制元素内部所有文本的颜色关于颜色值的四种写法: ...
图解css3：核心技术与案例实战. 3.3　CSS3图片边框属性
3.3 CSS3图片边框属性 border-image效果在CSS2中,只有使用背景图片来制作,而且制作过程非常复杂,做完后也很难维护.如今CSS3中增添了一个图片边框的属性,能够模拟出backgro ...
html表格如何两段对齐,用css3多列属性实现css两端对齐
要实现css两端对齐,我在网上找了很多方法,都不怎么实用,都是兼容性闹得,column是css3的属性,是多列布局,使用column来实现两端对齐简单实用,就要设置下模块的个数跟column的列数一致 ...
浅谈CSS3中display属性的Flex布局，关于登陆页面属性框的设置
声明:本文转发自三里屯柯南的浅谈CSS3中display属性的Flex布局http://www.cnblogs.com/xuyuntao/articles/6391728.html 基本概念采用Fl ...

CSS3 border-radius 属性

CSS3 border-radius 属性相关推荐

最新文章

热门文章