css3圆角,建议IE10以上

如果border-radius 单位是百分比,则参考为自身宽高,因此当宽高不一致时,圆角为不规则形状

如果border-radius 为50%,则为椭圆;当宽高一致时,则为正圆

单独设置每个圆角:

四个值: border-radius:左上角 右上角 右下角 左下角

三个值: border-radius:左上角 右上角+左下角  右下角 

两个值: border-radius:左上角+右下角  右上角+左下角


兼容浏览器前缀

谷歌 -webkit-

火狐 -moz-

IE -ms-

欧朋 -o-

气泡对话框

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width:500px;
height:300px;
border:1px solid #000;
position: relative;
font-size:24px;
line-height: 300px;
text-align:center;
-webkit-border-radius:50%;
-moz-border-radius:50%;
-ms-border-radius:50%;
-o-border-radius:50%;
border-radius:50%;
}
div::before,
div::after{
content:'';
display: block;
position: absolute;
border:1px solid #000;
-webkit-border-radius:50%;
-moz-border-radius:50%;
-ms-border-radius:50%;
-o-border-radius:50%;
border-radius:50%;
}
div::before{
width:50px;
height:50px;
right:50px;
bottom:-25px;
}
div::after{
width:30px;
height:30px;
right:25px;
bottom:-50px;
}
</style>
</head>
<body>
<div>这是一段气泡对话框</div>
</body>
</html>

box-shadow:水平偏移  垂直偏移  模糊  扩展  颜色  位置

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 300px;
height: 200px;
background-color: #f0f;
margin:0 auto;
box-shadow:10px 10px 5px 0 #bbb;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

border-image 欧朋浏览器和IE浏览器不兼容

首先准备border.png

演示效果1:

图片铺满整个边框

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 300px;
height: 200px;
background-color: #f0f;
margin:0 auto;
border:30px solid black;
border-image:url(source/border.png) 30 30 round;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

演示效果2:

图片被拉伸来铺满边框

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 300px;
height: 200px;
background-color: #f0f;
margin:0 auto;
border:30px solid black;
border-image:url(source/border.png) 30 30 stretch;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

css3神奇的圆角边框、阴影框及其图片边框的更多相关文章

  1. CSS3学习之圆角box-shadow,阴影border-radius

    最近经常玩腾讯微博,出来职业习惯,看看它的CSS,里面运用了大量的css3的东东,有一处用到了Data URI,还有css e­xpression有争议的地方,对png24图片的处理也是用滤镜,类似( ...

  2. PIE使IE浏览器支持CSS3属性(圆角、阴影、渐变)

    http://www.360doc.com/content/12/1214/09/11181348_253939277.shtml PIE使IE浏览器支持CSS3属性(圆角.阴影.渐变) 2012-1 ...

  3. CSS边框(圆角、阴影、背景图片)

    1.圆角  border-radius是向元素添加圆角边框. 使用方法: border-radius:10px; /* 所有角都使用半径为10px的圆角 */ border-radius: 5px 4 ...

  4. 让IE支持Css3属性(圆角、阴影、渐变)

    >>>>>>>>>>>>>>>>>>>>>>>>> ...

  5. CSS3 02. 边框、边框圆角、边框阴影、边框图片、渐变、线性渐变、径向渐变、背景、过渡transition、2D转换

    边框圆角 border-radius 每个角可以设置两个值,x值.y值 border-top-left-radius:水平半径 垂直半径 border-radius:水平半径/垂直半径 border- ...

  6. 从零开始学 Web 之 CSS3(二)颜色模式,文字阴影,盒模型,边框圆角,边框阴影

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  7. CSS3(1)---圆角边框、边框阴影

    CSS3(1)---圆角边框.边框阴影 CSS3可以简单理解成是CSS的增强版,它的优点在于不仅有利于开发与维护,还能提高网站的性能. 一.圆角边框 圆角在实际开放过程中,还是蛮常见的.以前基本是通过 ...

  8. CSS3学习(圆角、图片、阴影、背景、渐变、文本、字体、2D、3D、过渡等)

    matrix CSS3 1.  圆角 border-radius:边框圆角的圆角半径 四个值:第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角. 三个值:第一个值为左上角, 第二 ...

  9. 从零开始学习前端开发 — 16、CSS3圆角与阴影

    一.css3圆角: border-radius:数值+单位; 1.设置一个值:border-radius:20px; 四个方向圆角都为20px(水平半径和垂直半径相等) 2.设置两个值 border- ...

随机推荐

  1. Spring相关jar说明

    Spring整合使用说明 一.只是使用spring框架 dist\spring.jar lib\jakarta-commons\commons-logging.jar 如果使用到了切面编程(AOP), ...

  2. 1759: 学生信息插入(武汉科技大学结构体oj)(已AC)

    #include<stdio.h>struct student { long no; char name[9]; int score;} t;void input(struct stude ...

  3. ovirt kvm嵌套虚拟化

    嵌 套式虚拟nested是一个可通过内核参数来启用的功能.它能够使一台虚拟机具有物理机CPU特性,支持vmx或者svm(AMD)硬件虚拟化.关于 nested的具体介绍,可以看这里 .该特性需要内核升 ...

  4. 验证码,java

    这几天打算写一个验证码出来 遇到了几个问题 imageio写入失败:原因我创建文件的时候是先建立一个text文本,然后修改后缀,图片写不进去,还有没有编译 图像扭曲:粘连的问题,目前解决图像扭曲的问题 ...

  5. SpringBoot学习笔记 文件访问映射

    通过SpringBoot可以把磁盘内所有的文件都访问到 有一张图片存放在 E://images/acti/123.jpg import org.springframework.context.anno ...

  6. 通俗易懂的ref和out区别

    ref 和 out 是C#开发中经常用到的两个关键字,但是很多人没有搞清楚这两个关键字的具体区别,下面我们来说一下这两个关键的区别. 零. ref 与 out 的异同 相同: 都是按地址传递: 使用后 ...

  7. Go语言实现:【剑指offer】包含min函数的栈

    该题目来源于牛客网<剑指offer>专题. 定义栈的数据结构,请在该类型中实现一个能够得到栈中所含最小元素的min函数. 时间复杂度应为O(1). Go语言实现: var myList = ...

  8. 《Head first设计模式》之适配器模式

    适配器模式将一个类的接口,转换成客户期望的另一个接口.适配器让原本接口不兼容的类可以合作无间. 我们周围的适配器 如果你需要在欧洲国家使用美国制造的笔记本电脑,你可能需要使用一个交流电的适配器. 你知 ...

  9. ajax面试要点

    目录 目录 ajax是什么? 优点 缺点 ajax的工作原理 如何创建一个ajax(ajax的交互模型) ajax过程中get和post的区别 同步和异步的区别 JavaScript 的同源策略 如何 ...

  10. GNU C相关

    GNU __attribute__ 用于在函数声明时,定义函数参数的一些特殊属性,比如,如果函数的某个参数可能用不到,那么,将该参数增加unused属性即可,如下(一般用两个括号包括属性unused) ...