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 ...

随机推荐

C语言中，隐藏结构体的细节
我们都知道,在C语言中,结构体中的字段都是可以访问的.或者说,在C++ 中,类和结构体的主要区别就是类中成员变量默认为private,而结构体中默认为public.结构体的这一个特性,导致结构体中封装 ...
servlet context 和 servlet config
servletConfig Servlet容器初始化一个servlet对象时,会为这个servlet对象创建一个servletConfig对象,该对象中包含了servlet的<init-para ...
利用shell脚本监控目录内文件改动
#! /bin/bash webroot="/home/www/" cp /dev/null rsync_file if [ ! -f file.md5 ];then ...
java虚拟机学习-JVM调优总结-典型配置举例（10）
以下配置主要针对分代垃圾回收算法而言. 堆大小设置年轻代的设置很关键 JVM中最大堆大小有三方面限制:相关操作系统的数据模型(32-bt还是64-bit)限制:系统的可用虚拟内存限制:系统的可用物理 ...
Java 8 新特性1-函数式接口
Java 8 新特性1-函数式接口 (原) Lambda表达式基本结构: (param1,param2,param3) -> {代码块} 例1: package com.demo.jdk8; i ...
一天搞定HTML----标签语义化04
根据页面里不同的内容,选择最适合它的标签,而不通篇只用一种标签标签语义化作用: 代码演示通过比较- - -H5布局和DIV+CSS 布局- - -体现标签语义化注意: 标签语义化,不仅仅只是指使 ...
Java File类应用：递归遍历文件夹和递归删除文件
要求: 1)采用递归遍历文件夹下的所有文件,包括子文件夹下的文件 2)采用递归删除文件下的所有文件注意: 以下递归删除文件的方法,只能删除文件,所有的文件夹都还会存在若要删除正文文件夹,可以在递归 ...
sql 经典面试题
如果数据库里两个日期型字段d1,d2,怎样用sql语句列出按月的所有区间,比如表结构如下localid d1 d21 2014-1-15 2014-3- ...
selinux导致docker启动失败
1. 问题描述:一向运行正常的一群容器,突然有一天挂掉了,再也起不来,报错如下 Error response from daemon: devmapper: Error mounting '/dev/ ...
jsonp跨域再谈
昨天面试雷锋网,问到了jsonp跨域的问题,其实这个问题之前就会的,没有多大的深入,记得有一个名词在跨域中出现,就是同源机制, JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在J ...

CSS3学习系列之背景相关样式（二）

CSS3学习系列之背景相关样式（二）的更多相关文章

随机推荐

热门专题