Home >Web Front-end >HTML Tutorial >css3 border note_html/css_WEB-ITnose
css3 border note_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:41:171020browse
css3 border
The border attribute has been defined in css1. You can use it to set the border style, border color and border thickness of the element.
border-width: Set the thickness of the element border.
border-color: Set the color of the element border.
border-style: Set the type of element border.
In actual application, the above three attributes can be combined, abbreviated as:
border:border-width border-color border-style;
It can also be set for different sides The rules for different styles follow the order of top, right, bottom, and left.
Since border-width and border-color have default styles, they can be omitted, but border-style must be written, otherwise the border style will not be displayed. Commonly used ones are solid line "solid" and dotted line "dashed" , dotted line "dotted", etc.
border-color
The border-color property has been enhanced in CSS3, which can set more colors for element borders.
border-color:[<color> | transparent{1,4} | inherit The syntax of border-color looks exactly the same as that in css1. If you use the abbreviation syntax of border-color, it will not have any effect. The standard writing method of border-color must be split into Four borders, use multiple colors.
border-top-colors:[<color> | transparent{1,4} | inheritborder-left-colors:[<color> | transparent{1,4} | inheritborder-bottom-colors:[<color> | transparent{1,4} | inheritborder-left-colors:[<color> | transparent{1,4} | inherit Note: color is a negative number colors.
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> div{ width:100px; height:100px; border:10px solid; -moz-border-top-colors:red yellow blue green red yellow blue green red yellow; -moz-border-right-colors:red yellow blue green red yellow blue green red yellow; -moz-border-bottom-colors:red yellow blue green red yellow blue green red yellow; -moz-border-left-colors:red yellow blue green red yellow blue green red yellow; } </style></head><body><div></div></body></html> The parameter of border-color attribute is actually very simple, which is the color value. When border-color only sets one color value, the effect is the same as border-color in css1. As long as n color values are set and the border width is n pixels, you can use the border-color property of CSS3 to set n colors. Each color displays a width of 1 pixel. If the width value is greater than the value of the number of colors, the last one A color is used to show the remaining width.
border-image
CSS3 adds a picture border (border-image) attribute, which can simulate the function of the background-image attribute.
border-image:none | <image> [<number> | <percentage>]{1,4} [/ <border-width>{1,4}]? [stretch | repeat | round]{0,2} For the sake of simple understanding, we decompose the above attributes into four sub-attributes (in practice, they must be played according to the standard). They are:
Introduction of background image: border-image-soure
Cutting of introduction of background image: border-image-slice
Width of border background image: border-image-width
Border background image Arrangement: border-image-repeat
border-image-source
border-image-source:url(image url)
Border-image-source is similar to the background-image attribute, and also calls the background image through url(). The path of the image can be a relative address or an absolute address. The default value is none.
border-image-slice
border-image-slice:[<number> | <percentage>]{1,4} && fill ? Border-image-slice is used to decompose the introduced background image.
The value supports pixels and percentages, where pixels do not need to add units , because the default unit is pixels, and the percentage is relative to the border background image. For example, the size of the border image is 300px X 240px, Take the percentages as 25%, 30%, 15%, and 20%. Their actual corresponding effect is to cut (from outside to inside) the size of the four sides of the picture: 60px, 90px, 36px, and 60px (follow the order of top, right, bottom, and left) . Fill literally means filling. If this keyword is used, the middle part of the image border will be retained. The default is empty.
border-image-width
border-image-width:[<length> | <percentage> | <number> | auto]{1,4} Used to set the display size of the border background image, understood as border-width.
border-image-repeat
border-image-repeat:[stretch | repeat | round]{1,2} Used to specify the arrangement of border background images, stretch, repeat, round tile, its default value is stretch. It only accepts at most two parameter values, the first value represents the horizontal arrangement, and the second value represents the vertical arrangement. When taking a value, it means that the horizontal and vertical directions are arranged in the same way.
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> div{ width:200px; height:200px; /*剪切了图片四个方向各27px，并设置边框大小为27px，水平方向平铺，垂直方向拉伸*/ -moz-border-image:url(https://img.alicdn.com/imgextra/i4/2406102577/TB2d_gVdFXXXXcLXXXXXXXXXXXX_!!2406102577.png) 27 27 27 27/27px round stretch; } </style></head><body> <div></div></body></html> border-radius
CSS3 adds a rounded corner attribute border-radius specifically for the rounded corner effect of elements.
border-radius:none | <length> {1,4}[/<length>{1,4}] ? Border-radius is an abbreviation. If the backslash symbol "/" is set, the value before the backslash is the horizontal radius of the element's rounded corner, and the following value is the vertical radius. If omitted, the horizontal and vertical radii are the same.
None: Default value, indicating that the element has no rounded corners.
d82af2074b26fcfe177e947839b5d381: A length value consisting of a floating point number and a unit identifier. Cannot be a negative value.
Note: If you want to reset the element without rounded corners, setting the value none has no effect. You need to set the value to 0.
Border-radius can separate each corner separately.
/*定义元素左上角圆角*/ border-top-left-radius:<length>/<length> /*定义元素右上角圆角*/ border-top-right-radius:<length>/<length> /*定义元素右下角圆角*/ border-bottom-right-radius:<length>/<length> /*定义元素左下角圆角*/ border-bottom-left-radius:<length>/<length>
Circle
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> div{ width:100px; height:100px; background:#808080; /*半径是宽度的一半*/ border-radius:50%; } </style></head><body><div></div></body></html> Semi-circle
div{ width:100px; height:50px; background:#808080; /*定义左上角与右上角的半径为宽度的一半*/ border-radius:50px 50px 0 0; }
Sector
div{ /*宽高半径一样，只设置一边*/ width:100px; height:100px; background:#808080; border-radius:100px 0 0 0; } Ellipse
div{ width:100px; height:50px; background:#808080; /*水平半径等于宽，垂直半径等于高*/ border-radius:100px/50px; } box-shadow
Box-shadow is also an important new attribute of CSS3. Used to define the box shadow of the element.
box-shadow:none | [<length> <length> <length>?<length>? || <color>] [,<length> <length> <length>?<length>? || <color>]+
Can be abbreviated as:
box-shadow:none | [inset x-offset y-offset blur-radius spread-radius color],[inset x-offset y-offset blur-radius spread-radius color]
box-shadow属性可以使用一个或多个投影，中间用逗号“，”隔开。
none:默认值，元素没有任何阴影效果。
inset:阴影类型，可选值。如果不设置，默认的投影方式是外阴影，如果设置为inset，就是投影为内阴影。
x-offset:阴影水平偏移量，其值可以是正负值。如果取正值，则阴影在元素的右边；如果取负值，则阴影在元素的左边。
y-offset:阴影垂直偏移量，其值可以是正负值。如果取正值，则阴影在元素的下边；如果取负值，则阴影在元素的上边。
blur-radius:阴影模糊半径，可选参数。只能为正值，如果取值为0，表示阴影不具有模糊效果，值越大，阴影的边缘越模糊。
spread-radius:阴影扩展半径，可选参数。其值可以是正负值，如果取值为正值，则整个阴影都扩大，负值缩小。
color:阴影颜色，可选参数，如果不设定任何颜色，浏览器会取默认色。
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> div{ width:100px; height:50px; border:1px solid #808080; border-radius:10px; /*水平与垂直偏移量为正值，阴影在元素右边与下边，黑色*/ box-shadow:2px 2px 0 0 black; } </style></head><body> <div></div></body></html> 阴影太浓，我们添加阴影模糊半径。
div{ width:100px; height:50px; border:1px solid #808080; border-radius:10px; box-shadow:2px 2px 5px 0 black; } 阴影模糊半径不只模糊了阴影边缘，整个元素都笼罩在阴影模糊半径之下，我们再添加阴影扩展半径，设置负值，使模糊半径缩小。
div{
width:100px;
height:50px;
border:1px solid #808080;
border-radius:10px;
box-shadow:2px 2px 5px -3px black;
}
只设置模糊半径与颜色。
div{ width:100px; height:50px; border:1px solid #808080; border-radius:10px; box-shadow:0 0 10px 0 red; } 只设置扩展半径与颜色。
div{ width:100px; height:50px; border:1px solid #808080; border-radius:10px; box-shadow:0 0 0 3px red; } 扩展半径类似边框效果，但不同的是，阴影并不在文档流中，所以不会改变布局。阴影可以设置多个，因此我们可以借助阴影扩展半径制作类似多边框颜色的效果。
div{ width:100px; height:50px; border:1px solid #808080; border-radius:10px; box-shadow:0 0 0 3px red, 0 0 0 6px yellow, 0 0 0 9px blue, 0 0 0 12px green; }
内阴影效果
div{ width:100px; height:50px; border:1px solid #808080; border-radius:10px; box-shadow:inset 2px 2px 2px 0 black; } 内阴影的阴影方向与外阴影的阴影方向相反，内阴影水平偏移量取正值时在左边，负值时在右边，垂直偏移量取正值时在上边，负值时在下边。
多层阴影效果
div{ width:100px; height:50px; border:1px solid #808080; border-radius:10px; box-shadow:2px 2px 2px red, 4px 4px 2px yellow, 6px 6px 2px blue, 8px 8px 2px green; } css3边框完，然个中奥妙，却不止