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 ...
随机推荐
- 基于SURF特征的图像与视频拼接技术的研究和实现（一）
基于SURF特征的图像与视频拼接技术的研究和实现(一) 一直有计划研究实时图像拼接,但是直到最近拜读西电2013年张亚娟的<基于SURF特征的图像与视频拼接技术的研究和实现>,条 ...
- noi 8465 马走日
8465:马走日 查看 提交 统计 提问 总时间限制: 1000ms 内存限制: 1024kB 描述 马在中国象棋以日字形规则移动. 请编写一段程序,给定n*m大小的棋盘,以及马的初始位置(x,y ...
- Poj(3615)，Floyd，最大值中的最小值
题目链接:http://poj.org/problem?id=3615 题意:大致题意:有N个木桩,和M个木桩对之间的高度差(从x跳到y需要往上跳的高度).从x跳跃到y的路径消耗的体力值是路径中的一个 ...
- python Flask restful框架
框架地址:https://github.com/flask-restful/flask-restful 文档:http://flask-restful.readthedocs.io/en/0.3.5/ ...
- sass的安装与基础
安装教程:http://www.haorooms.com/post/sass_css 手册:http://sass.bootcss.com/docs/guide/ http://www.w3c ...
- 《redis-php中文参考手册》
<redis中文手册>,将示例代码用php来实现,注意php-redis与redis_cli的区别(主要是返回值类型和参数用法). phpredis是redis的php的一个扩展,效率是相 ...
- 使用Tesseract OCR识别验证码
1.下载Tessrac OCR,默认安装 2.把验证码code.jpg图片放在D盘 3.打开cmd,进入D盘,输入:tesseract code.jpg result 4.进入D盘,生成了resul ...
- Swift 动画学习笔记
视频地址: http://www.swiftv.cn/course/i275v5lz 1,动画属性 position(位置),opacity(透明度,0 全透明,1 不透明),Scale(尺寸),Co ...
- Device Tree（三）：代码分析
一.前言 Device Tree总共有三篇,分别是: 1.为何要引入Device Tree,这个机制是用来解决什么问题的?(请参考引入Device Tree的原因) 2.Device Tree的基础概 ...
- Cheatsheet: 2015.02.01 ~ 02.28
Other API Best Practices: API Management Rewriting History with Git Rebase .NET Announcing Microsoft ...