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. Docker Mysql部署与使用

    参考链接:Docker 安装 Mysql 详解

  2. mac如何用quick look预览多个文件或者图片

    1.先选中要查看的多个文件,然后点击 空格键 2.按住 command+return 就可以同时预览多个文件了 如果想全屏预览,则在1中,按住 option+空格键 ,然后再进行2 ,就实现全屏预览了 ...

  3. YYC松鼠短视频系统上传视频会被压缩的问题如何解决?

    uni.chooseVideo({ count: 1, compressed: false, sourceType: ['album', 'camera'], success: (res) => ...

  4. usaco1.1

    Your Ride Is Here #include <iostream> #include <string> #include <vector> using na ...

  5. 《Python学习手册 第五版》 -第7章 字符串基础

    本章内容是关于字符串的,字符串是编程中经常遇到的问题,本章的内容不是包含所有字符串的讲解,而是针对其最基本的内容进行说明,后续的相关章节会根据需要进行扩展和说明,例如后续的第37章内容会讲解Unico ...

  6. 第2章 Java并行程序基础(三)

    2.8 程序中的幽灵:隐蔽的错误 2.8.1 无提示的错误案例 以求两个整数的平均值为例.请看下面代码: int v1 = 1073741827; int v2 = 1431655768; Syste ...

  7. python练习——第0题

    原GitHub地址:https://github.com/Yixiaohan/show-me-the-code 题目:将你的 QQ 头像(或者微博头像)右上角加上红色的数字,类似于微信未读信息数量那种 ...

  8. Oracle 12C In-Memory特性研究

    Oracle 12C In-Memory特性研究一.Oracle In-Memory1.1 In-Memory 开启方法1.2 开启与关闭IM column store1.3 inmemory优先级调 ...

  9. 命令拼接符 || && 区别

    &&   前面的命令执行成功,执行拼接符后面的命令. ||      前面的命令执行失败,执行拼接符后面的命令. 举例: (1)whoami && net user 真 ...

  10. Nginx安装(yum源)

    CentOS7 $ vi /etc/yum.repos.d/nginx.repo [nginx] name=nginx repo baseurl=http://nginx.org/packages/c ...