html盒子圆角属性,CSS盒子模型-圆角边框

CSS3中新增了圆角边框样式，可以将盒子变为圆角。

border-radius

用于设置元素的外边框圆角。

语法：

border-radius:length;

参数值可以为数值或百分比的形式

如果是正方形，想要设置为一个圆，把数值修改为高度或宽度的一半即可，或者直接写为50%/

如果是个矩形，将length设置为高度的一半就可以做一个圆角矩形

该属性是一个简写属性，可以跟4个值，分别代表左上角、右上角、右下角、左下角

分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius和border-bottom-left-radius

例：

代码段：

.yuanxing{

width: 200px;

height: 200px;

background-color: pink;

/*border-radius: 100px;*/

/*设置为50%的意思就是宽度的一半*/

border-radius: 50%;

}

.juxing{

width: 400px;

height: 200px;

background-color: pink;

/*圆角矩形设置为高度的一半*/

border-radius: 100px;

}

.radius{

width: 400px;

height: 200px;

background-color: pink;

/*设置的顺序为左上,右上,右下,左下,顺时针*/

/*border-radius: 10px 30px 50px 100px;*/

/*也可以跟两个值*/

/*border-radius: 50px 100px;*/

/*也可以跟三个值*/

/*border-radius: 10px 100px 50px;*/

/*还可以分开写*/

border-top-left-radius: 10px;

border-top-right-radius: 30px;

border-bottom-right-radius: 50px;

border-bottom-left-radius: 100px;

/*需要记住的是先top/bottom,再left/right*/

}

radius(半径)圆角原理：设置一个length半径大小的圆与盒子相交，保留相交后的圆角。

html盒子圆角属性,CSS盒子模型-圆角边框相关推荐

css中盒子的属性,css盒子模型及属性介绍
盒子模型块元素(盒子) 搭建网页结构 1.特点: 1)独占一行空间 2)默认宽度为100%(占满父元素) 3)高度默认为0,如果有子元素,父元素高度由子元素决定 4)宽度和高度可以改变,通过width ...
html盒子圆角属性,css圆角属性是什么
css圆角属性是border-radius,通过该属性我们可以给任何元素制作圆角,例如[border-radius: 15px 50px 30px 5px].如果我们在border-redius属性中 ...
css怎么设置圆角背景,CSS新特性:圆角边框多栏Gird布局背景设置
到现在为止,只有一些已经工作的CSS3特性. 到现在为止,只有一些已经工作的特性,他们中的一些如下: 圆角从web2.0开始,开始流行使用圆角,如果你不使用圆角,你的网站可能不会被列入web2.0网 ...
html中盒子的定位,css盒子的定位有哪些方法？
所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用.CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实 ...
html如何给盒子设置位置,CSS盒子定位
又到周末了,又结束了一周的课程了,表示昨前天开始老师布置家庭作业开始写页面了,前天的还好,12点之前搞定,昨天的熬到2点,表示大神不要笑哈,毕竟能力有限,第二天看了老师的讲解,才发现做了非常多的无用功 ...
html如何设置圆角效果,css怎么设置圆角边框样式？
很多时候在开发网页前端的时候,为了让网页上面的东西看起来更加的舒服,我们可能需要设置一些圆角的效果,比如圆形的头像.圆角的按钮等等. 在css样式中有一个属性:border-radius属性是就常见 ...
html导航栏圆角,纯css实现蓝色圆角效果水平导航菜单代码
纯css实现蓝色圆角效果水平导航菜单代码这是一款可爱的蓝色圆角水平导航菜单,用到几张背景图片,我觉得这款菜单挺实用,特别是用在个人博客中非常合适.在兼容性方面做的'也很好,几乎兼容所有的浏览器. 运 ...
CSS盒模型、边框和背景、表格和列表、颜色和透明度、阴影和轮廓及长度单位rem
1.CSS 盒模型元素尺寸 CSS 盒模型中最基础的就是设置一个元素的尺寸大小.有三组样式来配置一个元素的尺寸大小,样式表如下: 属性值说明 CSS版本 width auto.长度值或百分比设 ...
html盒子宽高,css盒子模型之宽度和高度
盒子模型的宽度width高度height;宽度和高度的单位px像素,使用%动态计算(自适应和响应式) HTML代码 *lt;div class="pag1">*lt;/div ...

html盒子圆角属性,CSS盒子模型-圆角边框

html盒子圆角属性,CSS盒子模型-圆角边框相关推荐

最新文章

热门文章