CSS3_边框属性之圆角
一、border-radius是向元素添加圆角边框：
border-radius的值不仅能用px单位，你还可以用百分比或者em，但兼容性目前还不太好。（都不能是负值）
1、border-radius
设置或检索对象使用圆角边框。
如果提供四个参数值，将按上左、上右、下右、下左的顺序作用于四个角。
设置或检索对象的左下角圆角边框
二、使用方法
<style>
.box1{ padding:10px;width:180px;height:80px;border:2px solid red;border-radius:20px;}
.box2{ padding:10px;width:180px;height:80px;border:2px solid red;border-radius:10px 20px 30px 40px;}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
<style>
div{width:180px;height:80px;border:2px solid red;padding:10px;border-radius:20px/20px 40px 80px;}
/*20px代表左上角,40px代表右上角和左下角,80px代表右下角*/
</style>
</head>
<body>
<div></div>
</body>
<style>
div{ padding:10px; width:180px;height:80px;border:2px solid red; border-radius:20px 40px 80px 100px/20px 40px 80px 100px;}
/*20px 代表左上角的垂直半径,40px 代表右上角的垂直半径,80px 代表右下角的垂直半径,100px 代表左下角的垂直半径*/
</style>
</head>
<body>
<div></div>
</body>
CSS3_边框属性之圆角的更多相关文章
- CSS3_边框属性之圆角的基本图形案例
一.正方形 div{ background:#F00; width:100px; height:100px;} 二.长方形 div{background:#F00;width:200px;heig ...
- css3设置边框属性
css设置边框属性:设置边框圆角 <!DOCTYPE html> <html> <head lang="en"> <meta charse ...
- WPF将TextBox的边框设为圆角的
将TextBox的边框设为圆角的,因为TextBox默认的样式中边框就是由Border类型来实现的, 所以只需要真的当前的TextBox的Border修改属性即可,为了不影响界面中别的Border的样 ...
- CSS3的新增边框属性
一.CSS3 新增的边框属性 属性 版本 简介 border-image CSS3 设置或检索对象的边框使用图像来填充 border-image-source CSS3 设置或检索对象的边框是否用图像 ...
- Web前端篇：CSS常用格式化排版、盒模型、浮动、定位、背景边框属性
目录 Web前端篇:CSS常用格式化排版.盒模型.浮动.定位.背景边框属性 1.常用格式化排版 2.CSS盒模型 3.浮动 4.定位 5.背景属性和边框属性 6.网页中规范和错误问题 7.显示方式 W ...
- IT兄弟连 HTML5教程 CSS3属性特效 圆角
传统的圆角生成方案,必须使用多张图片作为背景图案.CSS3的出现,使得我们再也不必浪费时间去制作这些图片了,只需要border-radius属性,支持浏览器IE 9.Opera 10.5.Safari ...
- 前端1-----CSS颜色属性,字体文本和背景属性,边框属性,margin和padding,盒模型,行内块转换,浮动,三大定位
前端1-----CSS颜色属性,字体文本和背景属性,边框属性,margin和padding,盒模型,行内块转换,浮动,三大定位 一丶css选择器的优先级 行内 > id选择器 > 类选择器 ...
- CSS的背景属性和边框属性
CSS的背景属性: background 简写属性,作用是将背景属性设置在一个声明中 background-attachment 背景图像是否固定或者随着页面的其余部分滚动 background-co ...
- border边框属性
边框属性: 边框宽度(border-width):thin.medium.thick.长度值 边框颜色(border-color):颜色.transparent(透明) 边框样式(border-sty ...
随机推荐
- U3D刚体测试1-刚体非刚体物体非Kinematic等之间的碰撞关系
Unity官方有一个详细的碰撞关系表:http://docs.unity3d.com/Manual/CollidersOverview.html 但其实可以精简为以下几点: 1.两个勾选kinemat ...
- JAVA基础知识之多线程——线程组和未处理异常
线程组 Java中的ThreadGroup类表示线程组,在创建新线程时,可以通过构造函数Thread(group...)来指定线程组. 线程组具有以下特征 如果没有显式指定线程组,则新线程属于默认线程 ...
- 2016CCPC东北地区大学生程序设计竞赛 1001 HDU5922
链接http://acm.hdu.edu.cn/showproblem.php?pid=5922 题意:最小生成树,但边的权值是连接两点的最小公倍数 解法:不要真的写最小生成树啦,只要其他点和第一点相 ...
- Annotation实战【自定义AbstractProcessor】
前言 在使用Java的过程中,每个开发人员都接触过@Override, @Deprecated等等各式各样的注解,这些东西是java最基础的一些原生定义好的annotation.本文通过一个实例演示如 ...
- java解析密钥格式
import java.io.StringReader; import org.bouncycastle.asn1.ASN1Sequence; import org.bouncycastle.asn1 ...
- 华为S5700S配置总结
需要使用通讯控制线缆连接电脑和交换机, 一头接交换机的Console口,一头接电脑(应该需要串口,没有的话得用USB转串口). 在PC机上运行终端仿真程序,设置终端通信参数为: 波特率为9600bit ...
- Java爬虫工程师技能列表
以下仅仅是自己一些粗浅认识.欢迎补充指正.欢迎进群交流! 掌握一半便能够熟练的开发爬虫玩了.自己正在努力中... 一.技能列表 1.掌握java.尤其编程网络部分:李刚的java基础至少看了三遍以上: ...
- iOS深入学习（UITableView：系列1-最基本的东西）
这是UITableView博客系列的第一篇,使用xib和arc编码,主要讲解一些UITableView使用过程中简单的.但是又容易被忽略的东西,而且我会告诉读者,怎样在使用了之后就再也不会忘记. 操作 ...
- 让PHP 5.3支持MSSQL连接
最近在Windows Server 2008配置了PHP环境,想要连接SQL Server 2008,但是悲催的发现,从5.3开始,PHP自带的dll不再支持2000以后的MS SQL Server了 ...
- Upgrade R （升级R语言）
R R version 3.1.1 (2014-07-10) -- "Sock it to Me" yum list installed | grep R R-core.x86_6 ...