前端----HTML/CSS 圆角边框

border的边框默认是直角矩形的,很多网页的边框都是圆角的,看起来很圆滑,舒服了不少

其实方法特别简单,css中的一个border-radius属性就够了

这个属性是CSS 3支持的

属性值是圆角的半径,半径越大,圆角的成都越大

方法如下:

boder-top-left-radius：30px； //左上角

boder-top-right-radius：30px； //右上角

boder-bottom-left-radius：30px； //右下角

boder-bottom-right-radius：30px； //左下角

如果这四个弧度的圆角相同，可以写成：

border-radius：30px；

border-radius：赋值的数量可以设置很多种不同的

一个参数就是上边的四个圆角弧度相同

border-radius：30px；

两个参数则第一个参数作为左上角,右下角圆角半径,第二个作为右上,坐下圆角半径

border-radius：30px 20px；

三个参数分别是左上 / 右上+左下 / 右下角的圆角半径

border-radius：30px 20px 10px;

四个参数的顺序是左上 / 右上/ 右下 / 左下的圆角半径(从左上开始顺时针)

border-radius： 40px 30px 20px 10px ;

我实验了一下4个参数的,代码如下:

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" charset="utf-8"><style>div {width:200px;height:100px;border :2px solid red;border-radius :40px 30px 20px 10px ;}</style>
</head>
<body><div/>
</body>
</html>

效果如下:

弧度区别不大可能看起来不明显,各位可以设置差别大一点

前端----HTML/CSS 圆角边框相关推荐

html 中圆角怎么写,css圆角边框代码怎么写？（代码示例）
本篇文章主要给大家介绍css边框效果怎么实现的. css圆角边框代码具体示例如下: css圆角边框代码实例 div { color: white; text-align:center; border: ...
css圆角边框怎么设置
css+div是页面设计的法宝,通过css+div能够设计出各种效果!本文给大家简单介绍下css圆角边框怎么设置,大家可以参考,也可以直接拿过去使用,当然要修改下具体的参数. border-radiu ...
html圆角边框怎么做,CSS圆角边框制作指南与实例
使用 CSS 制作圆角边框可能是网页前端设计师们最头痛的问题之一. 圆角边框看似简单, 但实现起来却很不简单, 可能需要复杂的页面结构或大量的边角图片, 方法很多, 但无论哪一种都是难以维护的. CS ...
html圆角边框只有左边,border-radius以外的CSS圆角边框制作方法
CSS3的border-radius利用DIV+CSS生成圆角边框,在很多情况下都会用到,目前DIV+CSS的圆角边框,一种是利用CSS3,一种是利用布局模拟出圆角. 先说第一种,利用CSS3,前提是 ...
CSS圆角边框、盒子阴影、文字阴影（01-07课）
01.综合案例-快报模块布局分析 1.大盒子div 2.分2个小盒子(上盒子为标题h,下盒子为列表(无序列表)) 02.03.04.综合案例-快报制作 1.头部制作 2.快报模块列表制作代码: &l ...
前端---HTML设置圆角边框
定义和用法 border-radius 属性是一个简写属性,用于设置四个 border-*-radius 属性. 提示:该属性允许您为元素添加圆角边框! 默认值: 0 继承性: ...
CSS / 圆角边框+阴影+浮动
目录圆角边框盒子阴影文字阴影传统网页布局的三种方式浮动浮动特性浮动元素经常和标准流父级搭配使用常见的网页布局案例浮动布局注意点圆角边框语法:border-radius: 半径; ...
css圆角边框(css圆角边框无效)
纯CSS制作圆角边框的代码是什么? #xsnazzy h1, #xsnazzy h2, #xsnazzy p {margin:0 10px; letter-spacing:1px;} #xsnazzy ...
DIV+CSS圆角边框
简洁型css圆角: 方法1: 简洁型css圆角矩形 code1: <style type="text/css"> .b1,.b2,.b3,.b4,.b1b,.b2b,. ...

前端----HTML/CSS 圆角边框

前端----HTML/CSS 圆角边框相关推荐

最新文章

热门文章