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 ...
随机推荐
- Javascript中最常用的经典技巧
1. oncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键<table border oncontextmenu= ...
- PreparedStatement接口及其方法的使用
PreparedStatement接口是Statement接口的子接口,使用它的好处有三个 一:简化代码,便于sql语句的书写 二:有效的禁止sql语句的注入,例如:用户名和密码,使用Prepared ...
- 使用selenium来完成的例子
地址:http://www.tuicool.com/articles/rimeey
- 数据库查询优化器的艺术：原理解析与SQL性能优化
数据库查询优化器的艺术 作者:李海翔 Oracle公司MySQL全球开发团队.资深专家 简单的浏览了一遍,由于以前没有接触过SQL优化这些知识,读起来还是非常吃力的,不过收获还是很大的. 作者通过对M ...
- HTML 5 Web Sockets应用初探
转载不错的http://developer.51cto.com/art/201008/217874.htm
- Android任务和返回栈完全解析
转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/41087993 本篇文章主要内容来自于Android Doc,我翻译之后又做了些加工 ...
- php访问mysql数据库
//建一个连接,造一个连接对象 $db = new MySQLi("localhost","root","123","mydb&q ...
- asp.net MVC4 lognet4 日志
asp.net MVC4 lognet4 日志 步骤: 1.引入log4net.dll 2.写配置文件 web.config 加入 如下代码 在<configSections> 中加入&l ...
- ubuntu安装StarDict星际译王
http://sixipiaoyang.blog.163.com/blog/static/6232358820144146386437/ 1,安装StarDict星际译王. 这是linux系统中最常用 ...
- 在vs中怎样一次性的添加一个文件夹到解决方案里
这个方法通常用到编译源码库方面,在这里我以编译静态库为例: 1.首先建立自己的工程Mytest 第二步 选择静态库 点击finish 完成工程的建立 第三步 点击PROJECT菜单项 选中Show A ...