边框圆角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 分类: 网页技术 传统的圆角生成方案,必须使用多 ...
随机推荐
- SPOJ Substrings
题目链接:戳我 题目大意:给定一个字符串,它的长度n<=2e5.求长度1~n的子串出现的最大次数. 对于一个子串,它的出现次数是多少?就是它所在endpos集合的大小qwq(注意,这里的大小不指 ...
- webstrom 一直反复indexing
从网上找了找答案 好多说 把大的静态文件exclude(在项目文件上右击-->Mark Directory As -->exclude)出去,可是不管用.我刚发生的情况是一直刷新,一遍一遍 ...
- Sql Sever 2012数据库更名失败 error:5030
打开SQL Server 2012数据库时,对HzWind_2MW数据库名修改为HzWind_2MW_GEM,结果出现如图1所示: 图1 数据库更名时出现error:5030 数据库不能重名名5030 ...
- 【BZOJ3217】ALOEXT 分块
题目传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=3217 分块过掉辣!!!!!!$O(n^{1.5}+q\times \sqrt{n})$的 ...
- QQ聊天框测试用例设计
QQ.微信聊天框的主要功能就是发送消息和接收别人发过来的消息. 消息内容类型: 纯文字 纯图片 纯表情 文字+表情 文件 发送键: 点击“发送”发送 使用快捷键发送(针对电脑端) 用户在线状态: 在线 ...
- AngularJS自定义Directive
(编辑完这篇之后,发现本篇内容应该属于AngularJS的进阶,内容有点多,有几个例子偷懒直接用了官方的Demo稍加了一些注释,敬请见谅). 前面一篇介绍了各种常用的AngularJS内建的Direc ...
- Java学习之路(十一):IO流<前戏>
File类的概述和构造方法 构造方法: File(String pathname):根据一个路径得到File对象 File(String parent,String child):根据一个目录和一个子 ...
- Linux的文件的打包(tar方法)
Linux的文件的打包(tar方法) tar -c: 建立压缩档案 -x:解压 -t:查看内容 -r:向压缩归档文件末尾追加文件 -u:更新原压缩包中的文件 这五个是独立的命令,压缩解压都要用到其中一 ...
- LINUX 实现端口转发 - 安装使用rinetd
网上查找安装rinetd 安装时候问题如下一致,找到此文,方解决. 源地址 系统环境:centos 5.4 系统需要gcc组件 yum -y install gcc* 安装完毕以后 首先下载wget ...
- 【数组】Find Peak Element
题目: A peak element is an element that is greater than its neighbors. Given an input array where num[ ...