CSS3学习系列之背景相关样式（二）
- 在border-radius属性中指定两个半径
在border-radius属性中，可以指定两个半径，指定方法如下所示：
border-radius:40px 20px;
针对这种情况，各种浏览器的处理方式并不一致，在chrome浏览器与safari浏览器中，会绘制出一个椭圆形边框，第一个半径为椭圆的水平方向半径，第二个半径为椭圆的垂直方向半径，在firefox浏览器与opera浏览器中，将第一个半径作为边框左上角与右下角的园半径来绘制，将第二个半径作为边框右上角与左下角的园半径来绘制。例子如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绘制圆角边框示例</title>
<style>
div{
border:solid 5px blue;
border-radius:40px 20px;
-moz-border-radius:40px 20px;
-o-border-radius:40px 20px;
-webkit-border-radius:40px 20px;
background-color: skyblue;
padding: 20px;
width: 180px;
}
</style>
</head>
<body>
<div>文字问文字问文字问文字问文字问文字问文字问</div>
</body>
</html>
- 不显示边框的时候
在css3中，如果使用了border-radius属性但是把边框设定为不显示的时候，浏览器将把背景的四个角绘制为圆角，例子如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绘制圆角边框示例</title>
<style>
div{
border:none;
border-radius:20px;
-moz-border-radius:20px;
-o-border-radius:20px;
-webkit-border-radius:20px;
background-color: skyblue;
padding: 20px;
width: 180px;
}
</style>
</head>
<body>
<div>文字问文字问文字问文字问文字问文字问文字问</div>
</body>
</html>
- 修改边框种类的时候
使用了border-radius属性后，不管边框是什么种类，都会将边框沿着圆角曲线进行绘制，例子如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绘制圆角边框示例</title>
<style>
div{
border:dashed 5px blue;
border-radius:20px;
-moz-border-radius:20px;
-o-border-radius:20px;
-webkit-border-radius:20px;
background-color: skyblue;
padding: 20px;
width: 180px;
}
</style>
</head>
<body>
<div>文字问文字问文字问文字问文字问文字问文字问</div>
</body>
</html>
- 绘制四个角不同半径的圆角边框
如果要绘制的圆角的四个角半径各不相同，可以将border-top-left-radius属性（指定左上角半径）、border-top-right-radius属性（指定右上角半径）、border-bottom-right-radius属性（指定右下角半径）、border-bottom-left-radius属性（指定左下角半径）。例子如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绘制圆角边框示例</title>
<style>
div {
border: solid 5px blue;
border-radius-topleft: 10px;
border-radius-topright:20px;
border-radius-bottomright:30px;
border-radius-bottomright:40px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomright: 30px;
-moz-border-radius-bottomleft: 40px;
-o-border-radius-topleft:10px;
-o-border-radius-topright:20px;
-o-border-radius-bottomright:30px;
-o-border-radius-bottomleft:40px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-left-radius: 30px;
-webkit-border-bottom-right-radius: 40px;
background-color: skyblue;
padding: 20px;
width:180px;
}
</style>
</head>
<body>
<div>文字问文字问文字问文字问文字问文字问文字问</div>
</body>
</html>
- border-image属性
在css3之前，如果要使用图像边框，若元素的长或宽是随时可变的，页面制作者通常采用的做法是让元素的每条边单独使用一幅图像文件，但是，这种做法也有缺点：一方面是比较麻烦，另一方面是页面上使用的元素也变得比较多了。
针对这种情况，css3中增加了一个border-image属性，可以让处于随时变化状态的元素的长或宽的边框统一使用同一个图像文件来绘制，使用border-image属性，会让浏览器在显示图像边框时，自动将所使用到的图像分割为9个部分进行处理，这样就不需要页面制作者再另外进行人工处理了。另外，页面中也不需要因此而使用较多的元素了。例子如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>border-image属性的使用示例</title>
<style>
div {
border-image: url(border.jpg) 20 20 20 20/20px;
-webkit-border-image: url(border.jpg) 20 20 20 20/20px;
-moz-border-image: url(border.jpg) 20 20 20 20/20px;
width: 200px;
}
</style>
</head>
<body>
<div>文字问文字问文字问文字问文字问文字问文字问</div>
</body>
</html>
- border-image属性简单的使用方法
border-image:url(图像文件的路径) A B C D
-webkit-border-image:url(图像文件的路径) A B C D
-moz-border-image:url(图像文件的路径)A B C D
border-image属性值中至少必须指定五个参数，其中第一个参数为边框所使用的图像文件的路径，A、B、C、D四个参数表示当浏览器自动把边框所使用到的图像进行分隔时的上边距、右边距、下边距及左边距。
对于border-top-image、border-left-image、border-right-image、border-bottom-image这四部分，浏览器分别作为上边框使用图像、左边框使用图像、右边框使用图像、下边框使用图像来进行显示，必要时可以将这四部分图像进行平铺或伸缩。例子如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>border-image属性的简单的使用方法</title>
<style>
div {
border:solid 5px;
border-image: url(border.jpg) 18 18 18 18;
-webkit-border-image: url(border.jpg) 18 18 18 18;
-moz-border-image: url(border.jpg) 18 18 18 18;
width: 300px;
}
</style>
</head>
<body>
<div>文字问文字问文字问文字问文字问文字问文字问</div>
</body>
</html>
- 使用border-image属性来指定边框宽度
在css3中，除了可以使用border属性或border-width属性来指定边框的宽度外，使用border-image属性同样可以指定边框的宽度，指定方法如下所示：
border-image:url(图像文件的路径) A B C D/border-width
可以在border-image属性中将四条边的边框指定为不同宽度，例如：
div{
border:solid;
border-image:url(borderimage.png) 18/5px 10px 15px 20px;
-webkit-border-image:url(borderimage.png) 18/5px 10px 15px 20px;
-moz-border-image:url(borderimage.png) 18/5px 10px 15px 20px;
width:300px;
}
- 指定四条边中图像的显示方法
可以在border-image属性中指定元素四条边中的图像时可以拉伸的方式显示，还是以平铺的方式显示，指定方法如下所示：
border-image:url(文件路径) A B C D/border-width topbottom leftright
其中，topbottom表示元素的上下两条边中图像的显示方法，leftright表示元素的左右两条边中的显示方法。在显示方法中可以指定的值为repeat、stretch、round三种。
repeat：图像将以平铺的方式进行显示。例子如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>指定四条边中图像为平铺显示</title>
<style>
div {
border-image: url(border.jpg) 18/5px repeat repeat;
-webkit-border-image: url(border.jpg) 18/5px repeat repeat;
-moz-border-image: url(border.jpg) 18/5px repeat repeat;
width: 300px;
height: 200px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
CSS3学习系列之背景相关样式（二）的更多相关文章
- CSS3学习系列之背景相关样式（一）
新增属性: background-clip:指定背景的显示范围 background-origin:指定绘制背景图像时的起点 background-size:指定背景中图像的尺寸 background ...
- CSS3学习系列之盒样式（二）
text-overflow属性 当通过把overflow属性的属性值设定为"hidden"的方法,将盒中容纳不下的内容隐藏起来时,如果使用text-overflow属性,可以在盒的 ...
- CSS3学习系列之布局样式（二）
使用盒布局 在CSS3中,通过box属性来使用盒布局,例子如下: <!DOCTYPE html> <html lang="en"> <head> ...
- CSS3学习系列之盒样式（一）
盒的基本类型 在css中,使用display属性来定义盒的类型,总体上来说,css中的盒分为block类型与inline类型 inline-block类型 inline-block类型是在css2.1 ...
- CSS3学习系列之选择器（二）
first-child选择器和last-child选择器 first-child指定第一个元素.last-child指定最后一个子元素. 例如: <!DOCTYPE html> <h ...
- CSS3学习系列之布局样式（一）
多栏布局 使用float属性或position属性的缺点: 使用float属性或position属性进行页面中的简单布局的例子. <!DOCTYPE html> <html lang ...
- [CSS3]学习笔记-CSS基本样式讲解
1.CSS样式-背景 CSS运行应用纯色作背景,也允许使用背景图像创建相当复杂的效果 <!DOCTYPE html> <html> <head lang="en ...
- css3学习系列之选择器（一）
CSS3中的属性选择器 [att*=val]属性选择器:[att*=val]属性选择器的含义是:如果元素att表示的属性之属性值中包含用val指定的字符的话,则该元素使用这个样式. [att^=val ...
- CSS3学习系列之选择器（四）
使用选择器来插入文字 css2中,使用before选择器在元素前面插入内容,使用after选择器在元素后面插入内容,在选择器的content属性中定义要插入的内容.将content属性值设定为none ...
随机推荐
- STM 8s 外部中断寄存器无法写入
虽然说单片机开发就是对手册的研究,但是开发过程中,还是要做些笔记的,方便以后注意那些坑. 工作要求所以接触了一下STM328s00f3这个芯片,配置外部中断的时候遇到了一点问题 PS:IAR这个开发软 ...
- Win10 + Python + GPU版MXNet + VS2015 + RTools + R配置
最近入手一台GTX 1070的笔记本,手痒想在win10上试下GPU跑模型,所以就有了接下来的安装GPU版mxnet的坎坷历程,经过多重试验终于搞定了python和R安装mxnet,现将主要点记录如下 ...
- Centos7下安装部署MXNET
Centos下安装MXNET,参考官方文档http://mxnet.io/get_started/setup.html#prerequisites, 一.安装python的mxnet步骤如下: #!/ ...
- R语言快速深度学习进行回归预测（转）
深度学习在过去几年,由于卷积神经网络的特征提取能力让这个算法又火了一下,其实在很多年以前早就有所出现,但是由于深度学习的计算复杂度问题,一直没有被广泛应用. 一般的,卷积层的计算形式为: 其中.x分别 ...
- 实现分布式队列ZooKeeper的实现
一.背景 有一些时候,多个团队需要共同完成一个任务,比如,A团队将Hadoop集群计算的结果交给B团队继续计算,B完成了自己任务再交给C团队继续做.这就有点像业务系统的工作流一样,一环一环地传下去,直 ...
- PHP接口学习
接口:不同类的共同行为进行定义,然后在不同类中实现不同的功能. 接口的具体语法: 接口是零件可以用多个零件组成一个新东西: 接口本身是抽象的,内部申明的方法也是抽象的: 不用加abstract 一个类 ...
- web前端面试集锦（自己搜集的，如有错误请不吝赐教）
css 1 浏览器兼容性 CSS hack(针对IE6-,IE7,IE8,IE9以及其他浏览器) ‘ * ’ : 所有的IE浏览器都能识别 说明:在标准模式中 “-″减号是IE6专有的hack “\9 ...
- [OpenGL]配置GLFW
注:本文可转载,转载请著名出处:http://www.cnblogs.com/collectionne/p/6937644.html.本文还会修改,如果不在博客园(cnblogs)发现本文,建议访问上 ...
- OpenGL教程(3)——第一个三角形
我们已经学会了创建窗口,这一讲,我们将学习如何使用现代OpenGL画一个三角形.在开始写代码之前,我们需要先了解一些OpenGL概念.本文会很长,请大家做好心理准备~ 注:以下OpenGL概念翻译自h ...
- 抓包工具-Wireshark（详细介绍与TCP三次握手数据分析）
功能使用的详细介绍 wireshark(官方下载网站: http://www.wireshark.org/),是用来获取网络数据封包,可以截取各种网络封包,显示网络封包的详细信息,包括http,TCP ...