CSS3之Border-radius
1、属性介绍
border-radius:none|12.3px,取值不可为负数,表示边框圆角
相关属性:border-top-right-radius ,
border-bottom-right-radius ,
border-bottom-left-radius ,
border-top-left-radius
2、版本兼容性
(1)IE不兼容
(2)火狐2.0不兼容
(3)Opera 9.64不兼容
(4)Chrome 1.0.x和2.0.x兼容
3、属性实例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS3之Border-radius</title> <style type="text/css"> body{ width:50%; height:100%; font-size:14px; } div{ width:100%; height:100px; text-align:center; vertical-align:middle; alignment-adjust:after-edge; alignment-baseline:after-edge; font-family:Tahoma, Geneva, sans-serif; border-style:solid; border-width:thick; -moz-border-radius:12px; -webkit-border-radius:20px; -moz-border-radius-bottomleft:12px; -webkit-border-bottom-left-radius:12px; -moz-border-radius-bottomright:12px; -webkit-border-bottom-right-radius:12px; -moz-border-radius-topleft:12px; -webkit-border-top-left-radius:12px; -moz-border-radius-topright:12px; -webkit-border-top-right-radius:12px; } </style> </head> <body> <div> 设置边框四方向的圆角 </div> </body> </html>
4、浏览器运行结果
CSS3之Border-radius的更多相关文章
- demo_01 css3中的radius
css属性:border-radius :border:边框:radius:弧度:所以这个属性的意思很明了. 下面实现一个小demo: <!doctype html> <html&g ...
- css3学习--border
http://blog.sina.com.cn/s/blog_61671b520101gelr.html border-radius border-radius: 50px 20px;上下都是50px ...
- css3实现border渐变色
案例1 .box{ width: 100px; height: 100px; border:10px solid #ddd; border-image: -webkit-linear-gradient ...
- css3 做border = 0.5px的细线
参考: https://blog.csdn.net/Tyro_java/article/details/52013531
- CSS3 用border写 空心三角箭头 (两种写法)
之前一直在寻找这种空心三角箭头, 终于知道了原理! 自己记录一下,顺便分享给之前跟我一样想要的撸友们~ 第一种写法 利用常见的 after伪元素 <!DOCTYPE html> <h ...
- css3动画使用技巧之—border旋转时的应用。
<html> <head> <title>css3动画border旋转时的应用.</title> <meta charset="UTF- ...
- 为 Web 设计师准备的 20 款 CSS3 工具
1.CSS3 Generator 2. Border Radius 3. CSS3 Maker 4. CSS3 Transforms 5. CSS3 Drop shadow generator 6. ...
- [css]需警惕CSS3属性的书写顺序
转载张鑫旭:http://www.zhangxinxu.com/wordpress/2010/09/%E9%9C%80%E8%AD%A6%E6%83%95css3%E5%B1%9E%E6%80%A7% ...
- 针对css3特性浏览器兼容 封装less
//--------------------------------------------------- // LESS Prefixer //--------------------------- ...
- 重温CSS:Border属性
边界是众所周知的,有什么新的东西吗?好吧,我敢打赌,在这篇文章中,有很多你不看永远不知道的东西! 不仅可以用CSS3来创建圆角,使用原有CSS一样可以显示自定义图形.这是正确的(有待考究):在过去,没 ...
随机推荐
- spring之AspectJ基于注解 AOP编程
一.前言 使用注解代替之前在spring配置文件中配置目标类.切面类和aop配置. 二.注意 需要注意的是,需要在spring配置文件中引入如下,如果不添加,切面类中的@Aspect注解将不起作用 & ...
- template()方法
template(id, data)方法: id:必传,渲染模板的id. data:可选,一个Object对象. return:传data—>渲染完成html代码:不传data—>一个渲染 ...
- dubbo调用负载均衡
dubbo负载均衡的地址:http://dubbo.io/books/dubbo-user-book/demos/loadbalance.html 随机策略: public class RandomL ...
- BZOJ 1758: [Wc2010]重建计划 [暂时放弃]
今天晚上思维比较乱,以后再写写吧#include <iostream> #include <cstdio> #include <cstring> #include ...
- 简单DNA序列组装(非循环子图)
生物信息学原理作业第四弹:DNA序列组装(非循环子图) 原理:生物信息学(孙啸) 大致思想: 1. 这个算法理解细节理解比较困难,建议看孙啸的生物信息学相关章节. 2. 算法要求所有序列覆盖整个目标D ...
- codeM美团编程大赛初赛B轮E题
题目描述 给出一个正整数n,我们把1..n在k进制下的表示连起来记为s(n,k),例如s(16,16)=123456789ABCDEF10, s(5,2)=11011100101.现在对于给定的n和字 ...
- ES6,数组遍历
ES6提供了entries(),keys(),values()方法返回数组的遍历器,对于遍历器(Iterator)可以使用for...of进行便利,也可是使用entries()返回的遍历器Iterat ...
- WebSocket就是这么简单
前言 今天在慕课网上看到了Java的新教程(Netty入门之WebSocket初体验):https://www.imooc.com/learn/941 WebSocket我是听得很多,没有真正使用过的 ...
- dnsmasq 做 DHCP 服务器
/etc/dnsmasq.conf #DNS服务器的地址,就是我的热点的地址 listen-address=192.168.1.1 #设置DHCP分配的地址范围和时间 dhcp-range=192.1 ...
- DML、DDL、DCL的区别
DML(data manipulation language): 它们是SELECT.UPDATE.INSERT.DELETE,就象它的名字一样,这4条命令是用来对数据库里的数据进行操作的语言DDL( ...