边框圆角Css
.box{
background:grey; //灰色背景
height:50px; //高500像素
width:200px; //宽200像素
border-top-left-radius:15px; //边框 左上 圆角15像素 4个圆角都是15像素
border-top-right-radius:15px;
border-bottom-right-radius:15px;
border-bottom-left-radius:15px;
}
也可以这么写
.box{
border-radius:15px;
}
或者这么写
.box{
border-radius:15px 10px 15px 20px;
}


设置规则:
一个值:四个圆角的值相同
两个值:第一个值为左上角与右下角,第二个值为右上角以左下角
三个值:第一个值为左上角,第二个值为右上角和左下角,第三个值为右下角
四个值:第一个值为左上角,第二个值为右上角,第单个值为右下角,第四个值为左下角
使用百分比:
.box{
border-radius:50%;
}
圆角半径分别是height和width的50%
椭圆圆角:
.box{
border-radius:50px/15px
}
第一个值为圆角的横轴半径,第二个值为圆角的纵轴半径

边框圆角Css的更多相关文章
- CSS的display、hover、overflow、©(版权符号)、borer-radius(边框圆角)
一.display: none 隐藏 block显示 visibility:hidden隐藏 visible显示 display:none和visibility:hidden这两个属性对应的值 ...
- CSS border-radius边框圆角
在CSS3中提供了对边框进行圆角设定的支持,可对边框1~4个角进行圆角样式设置. 目录 1. 介绍 2. value值的格式和类型 3. border-radius 1~4个参数说明 4. 在线示例 ...
- CSS(五)- 背景与边框 - 边框圆角与阴影基础用法
扩展阅读 本文仅仅做border的基础使用,想要深入了解的话可以戳以下几个链接,觉得作者写的很好. CSS Backgrounds and Borders Module Level 3 CSS魔法堂: ...
- css边框样式、边框配色、边框阴影、边框圆角、图片边框
边框样式 点线式边框 破折线式边框 直线式边框 双线式边框 槽线式边框 脊线式边框 内嵌效果的边框 突起效果的边框 <div style="width: 300px; height: ...
- CSS3 border-radius边框圆角
在CSS3中提供了对边框进行圆角设定的支持,可对边框1~4个角进行圆角样式设置. 目录 1. 介绍 2. value值的格式和类型 3. border-radius 1~4个参数说明 4. 在线示例 ...
- 使用css3来实现边框圆角效果
经常看到别人的网站有个边框来修饰文字区域,类似圆角矩形把文字环绕起来,特别有感觉,于是就试着用图片边框来修饰,但是用图片过多会拉慢网页的加载速度,能不能使用css3来实现边框圆角效果呢?当然borde ...
- CSS3 02. 边框、边框圆角、边框阴影、边框图片、渐变、线性渐变、径向渐变、背景、过渡transition、2D转换
边框圆角 border-radius 每个角可以设置两个值,x值.y值 border-top-left-radius:水平半径 垂直半径 border-radius:水平半径/垂直半径 border- ...
- 从零开始学 Web 之 CSS3(二)颜色模式,文字阴影,盒模型,边框圆角,边框阴影
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- css3(border-radius)边框圆角详解(转)
css3(border-radius)边框圆角详解 (2014-05-19 16:16:29) 转载▼ 标签: divcss html it css3 分类: 网页技术 传统的圆角生成方案,必须使用多 ...
随机推荐
- vs2017 xamarin新建单独UWP类库提示不兼容
One or more projects are incompatible with UAP,Version=v10.0 (win10-arm). One or more projects are i ...
- ASP.NET Core使用Elasticsearch记录NLog日志
ASP.NET Core使用Elasticsearch记录NLog日志 1.新建一个 ASP.NET Core项目 2.安装Nuge包 运行:Install-Package NLog.Web.AspN ...
- 四两拨千斤式的攻击!如何应对Memcache服务器漏洞所带来的DDoS攻击?
本文由 网易云发布. 近日,媒体曝光Memcache服务器一个漏洞,犯罪分子可利用Memcache服务器通过非常少的计算资源发动超大规模的DDoS攻击.该漏洞是Memcache开发人员对UDP协议支 ...
- shiro之深度解析FormAuthenticationFilter
shiro是我们在项目经常使用到的权限管理框架,本文我们就重点来分析FormAuthenticationFilter的验证过程. FormAuthenticationFilter 1.继承结构 ...
- Day 19 re 模块 random模块,正则表达式
https://www.cnblogs.com/Eva-J/p/7228075.html#_label10 findall search match方法 和 search相比 match自带 ^ se ...
- Flask系列01--flask认识, 启动, 响应
一. 四款python web框架简单总结 Django : 优点 - 大而全所有组件都是有组织内部开发高度定制化 教科书级别的框架 缺点 - 浪费资源,请求的时候需要的资源较高 Flask : 优势 ...
- 【zookeeper】Apache curator的使用及zk分布式锁实现
上篇,本篇主要讲Apache开源的curator的使用,有了curator,利用Java对zookeeper的操作变得极度便捷. 其实在学之前我也有个疑虑,我为啥要学curator,撇开涨薪这些外在的 ...
- uiautomatorviewer 双击闪退问题解决
最近在学习app自动测试,结果在打开uiautomatorviewer查看app界面元素时,就出现了闪退的问题,找了很多很多方法,最后终于可以解决了,详情请继续往下看 首次安装adt的步骤 将下载的压 ...
- 一个用JS数组实现的队列
一个用JS数组实现的队列 /*一个用数组实现的队列*/ function Queue(){ this.dataStore = [];//存放队列的数组,初始化为空 this.enqueue = enq ...
- IP等级
IP是Ingress Protection的缩写,IP等级是针对电气设备外壳对异物侵入的防护等级,来源是国际电工委员会的标准IEC 60529,这个标准在2004年也被采用为美国国家标准. 在这个标 ...