CS3

最新推荐文章于 2024-06-01 09:00:00 发布

weixin_30580943

最新推荐文章于 2024-06-01 09:00:00 发布

阅读量149

点赞数

原文链接：http://www.cnblogs.com/L-xjco/p/10814585.html

版权

1、border-image

　　border-image: source slice width outset repeat\initial\inherit;

　 ▪border-image-source: 用于指定要用于绘制边框图像的位置 ->border-image: url(border.png)；

　　▪border-image-slice: 图像边界向内偏移，指定上右下左边缘的图像向内偏移，分为九个区域：四角、四边、中间。图像中间部分会被丢弃（完全透明处理，除非填写关键字fill）。如果省略第四个数/百分比，则它和第二个相同；如果省略第三个，则它和第一个相同 ->border-image-slice: 50% 50%;

　　border-image-slice: [ number | % ] {1,4} && fill；

　　number: 数字表示图像的像素（位图图像）或向量的坐标（如果图像是矢量图像）；

　　%: 百分比图像大小是相对的，水平偏移图像的宽度，垂直偏移图像的高度；

　　fill: 保留图像中间部分。

　　参照：http://blog.sina.com.cn/s/blog_5f2389f90102vks0.html。

　　▪border-image-width:图像边界的宽度，其四个值指定用于把border图像区域分为九个部分，分别表示上右下左和两侧向内距离。被忽略的第四个值和第二个值相同，第三个值和第一个值相同，不允许负值 ->border-image-width: 30 30;

　　border-image-width: [ number | % ] {1,4} && auto；

　　number表示相应border-width的倍数；

　　%表示边界图像区域的大小：横向偏移的宽度面积，垂直偏移的高度面积。

　　auto如果指定，宽度是相应的image slice的内在宽度或高度。

　　▪border-image-outset: 用于指定在边框外部绘制border-image-area的量，包括上右下左部分，被忽略的第四个值和第二个值相同，第三个值和第一个值相同，不存在负值 ->border-image-outset: 30 30;

　　border-image-outset: length | number;

　　length: 设置边框图像与边框border-image的距离，默认0；

　　number: 代表相应的border-width倍数。

　　▪border-image-repeat: 用于图像边界是否应重复repeat、拉伸stretch或铺满round。

　　border-image-repeat: stretch | repeat | round | initial | inherit;

　　stretch: 默认值，拉伸图像来填充区域；

　　repeat: 平铺图像来填充区域；

　　round: 类似repeat值，如果无法完整平铺所有图像，则对图像进行缩放以适应区域；

　　initial: 将此属性设置为默认值；

　　inherit: 从父元素中继承该属性；

　　space: 类似repeat值，如果无法完整平铺所有图像，扩展空间会分布在图像周围，该属性浏览器支持比较少。

2、background-image

　　背景图像可以通过background-image属性添加，为同一个元素添加不同的背景图像，图片地址(background-image)、图片位置(background-position)、图片是否重复(background-repeat）属性用逗号分隔，注意：在最前面显示的图片放在第一张位置!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>background-image属性</title>
        <style>
            #example1 {
　　　　　　　　　 background-image: url(img_flwr.gif), url(paper.gif);
                background-position: right bottom, left top;
                background-repeat: no-repeat, repeat;
                padding: 15px;
            }
　　　　　　　/* 以上属性可这样缩写：background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat; */

        </style>
    </head>
    <body>
        <div id="example1">
            <h1>Lorem Ipsum Dolor</h1>
            <p>Lorem ispsum dolor sit amet, consrctetuer adipiscing elit, sed diam nonummy</p>
            <p>越努力越幸运</p>
        </div>
    </body>
</html>

2、background-size

　　指定背景图像的大小，按指定的像素或百分比大小显示，其大小根据父元素的宽高的大小显示（父元素的宽高如果不设定具体值，则根据background-size的值则根据内容的大小作为参照---就百分比而言）。

3、border-radius

　　该属性是四个边角border-*-*-radius的缩写，左上角弧度（border-top-left-radius）、右上角弧度（border-top-right-radius）、右下角弧度（border-bottom-right-radius）、左下角弧度（border-bottom-left-radius）。

　　border-top=left-raius: length | % [length | %] ->长度或百分比值定义了椭圆的四分之一外边框的边缘角落形状，第一个值为水平半径，水平半径的百分比是边界框的宽度；第二个值为垂直半径，垂直半径的百分比是边界框的高度（若省略，则和第一个值相等），任一长度为0，角落是方的。

4、Gradients

　　渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。至少创建两种颜色，同时可以设置一个起点和一个方向（或一个角度）,默认自上而下（IE9及之前版本不支持，-webkit-:Safari，-o-:Opera，-moz-Firefox）。

　　background: linear-gradient（direction, color-stop1, color-stop2...）;

　　自上而下：background: linear-gradient（red, blue）;

　　自左往右：background: linear-gradient（to right，red, blue）——right终点的位置,不加to，则是blue->red；

　　对角（左上角到右下角）：

　　　　background: -webkit-linear-gradient(bottom right, reds, blue); /*Safari*/
　　　　background: -o-linear-gradient(bottom right, red, blue); /*Opera*/
　　　　background: -moz-linear-gradient(bottom right, red, blue); /*Firefox*/
　　　　background: linear-gradient(to bottom right, red, blue); ——标准语法加to

　　线性渐变（Linear Gradients）向下/向上/向左/向右/对角方向；径向渐变（Radial Gradients）由它们的中心定义。

转载于:https://www.cnblogs.com/L-xjco/p/10814585.html

weixin_30580943

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CS3

1、border-image　　border-image: source slice width outset repeat\initial\inherit;　 ▪border-image-source: 用于指定要用于绘制边框图像的位置 ->border-image: url(border.png)；　　▪border-image-slice: 图像边界向内偏移，指...
复制链接

扫一扫