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 ...
随机推荐
- Mix and Build(简单DP)
Mix and Build Time Limit: 5000MS Memory Limit: 65536K Total Submissions: 3936 Accepted: 1203 Case Ti ...
- 山东理工大学第七届ACM校赛-最大收益问题 分类： 比赛 2015-06-26 10:25 51人阅读 评论(0) 收藏
最大收益问题 Time Limit: 2000ms Memory limit: 65536K 有疑问?点这里^_^ 题目描述 铁牌狗最近迷上了一款游戏,但铁牌狗实在是太笨了,他还是要请求你的帮助. 有 ...
- U3D UGUI学习2 - Canvas
Canvas Render Mode - UGUI不像NGUI,它没有UI摄像机.但有时候需要做相机动画就要调出来. 在Canvas里设置第二个选项即可调出. Pixel Perferct - 这个似 ...
- linux 帮助命令
帮助命令 man(manual) 可以用来查看1 命令 2 配置文件 格式 man ls 1 查看命令 看第一行NAME 如果要看-l ,那么直接输入/-l 2 查看配置文件 man 查看配置文件信息 ...
- WINCE+6410 拨号上网
我们现在的模块用的是USB接口,然后模拟成一个COM6进行通信,在CE的: 控制面板->网络连接 里要新建一个连接,选择"拨号连接"然后设置好区域代码,还有附加解调器命令+C ...
- 【leetcode❤python】Move Zeroes
#-*- coding: UTF-8 -*- #filter()函数可以对序列做过滤处理,就是说可以使用一个自定的函数过滤一个序列,#把序列的每一项传到自定义的过滤函数里处理,并返回结果做过滤.最终一 ...
- linux mv命令
mv命令是move的缩写,可以用来移动文件或者将文件改名(move (rename) files),是Linux系统下常用的命令,经常用来备份文件或者目录. 1．命令格式: mv [选项] 源文件或目 ...
- git泄漏原理
之前做过git的加固 但是这东西还是没办法避免的 之前看了乌云的提交的git泄漏,但是都没有详细的原理,去了lijiejie的博客(字太难打了,大师傅别打我 哈哈) 如果一个网站存在git泄漏,git ...
- 【分享】通过Excel生成批量SQL语句，处理大量数据的好办法
我们经常会遇到这样的要求:用户给发过来一些数据,要我们直接给存放到数据库里面,有的是Insert,有的是Update等等,少量的数据我们可以采取最原始的办法,也就是在SQL里面用Insert into ...
- 比Redis更快：Berkeley DB面面观
比Redis更快:Berkeley DB面面观 Redis很火,最近大家用的多.从两年前开始,Memcached转向Redis逐渐成为潮流:而Berkeley DB可能很多朋友还很陌生,首先,我们简单 ...