CSS3 Added attributes

  • Border attribute
  • Background properties
  • Text attributes
  • Color attribute
1. Border properties
attribute describe
border-radius Create a rounded border
box-shadow Add a shadow to the element
border-image Use a picture to draw the border
border-color Sets the color of the border

(1) the border – the radius

Border-radius is the attribute used to design the rounded corners of the border.

Grammar:

Border - the radius: none | < length > {1, 4} [/ < length > {1, 4}]?Copy the code
  • None: The default value, indicating no rounded corners
  • <length>: is the length value, which cannot be negative. It can be divided into two groups, each group can have 1 to 4 values. The first group is the horizontal radius, and the second group is the vertical radius

Ex. :

div{
    border-radius:20px;
    border-radius:20px 40px;
}
Copy the code

(2) the box – shadow

Box-shadow Adds a shadow to a box

Grammar:

box-shadow: h-shadow|v-shadow|blur|spread|color|inset;
Copy the code
  • H-shadow :(required) position of horizontal shadow. Allow the negative
  • V-shadow :(required) position of the vertical shadow. Allow the negative
  • I don’t have a blur
  • Spread: size of shadow
  • Color: The color of the shadow. Find the complete list of color values in CSS Color Values
  • Inset: Changes the inner shadow from the outer shadow (at the beginning)

Ex. :

div{
    box-shadow:10px 10px 5px # 888888;
}
Copy the code

(3) the border-image border-image attribute is specially used for processing the image border, which can be flexibly segmented and applied to the border.

Grammar:

Border - image: none | < image > / < number > | < percentage > {1, 4} [/ < border - width > {1, 4}]? [stretch | repeat | round] {0, 2}Copy the code
  • None: The default value, indicating that the border has no background image
  • <image>: Specifies the image source using an absolute or relative URL address
  • <number>: Crop border image size, no units, default in pixels
  • <percentage>: Crop the size of the border image, expressed in percentage
  • <border-width>: Used to set the border width, cannot be negative
  • Stretch, repeat, and round: stretch, repeat, and tile respectively. The default value is “stretch”

Ex. :

-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */
-o-border-image:url(border.png) 30 30 round; /* Opera */
border-image:url(border.png) 30 30 round;
Copy the code

(4) the border – color

The border-color property is used to set the color of the border.

Grammar:

Border - color: [< color > | transparent] {1, 4}Copy the code
  • <color>: is a color value, which can be a translucent color
  • Transparent: specifies the transparent value. This value is used when no color is specified. The default value is transparent

Ex. :

border-style:solid;
border-color:#ff0000 #0000ff;
Copy the code
2. Background properties

CSS3 enhances the functionality of the original background properties and adds some new background properties.

attribute describe
background-clip Specifies the display area of the background
background-origin Specifies the origin position of the background
background-size Specifies the size of the background image

(1) background – clip

Background-clip specifies the display area of the background.

Grammar:

background-clip:border-box|padding-box|content-box;
Copy the code
  • Border-box: indicates that the background is displayed from the border
  • Padding-box: Indicates that the background is displayed from the inside margin
  • Content-box: Indicates that the background is displayed only in the content area

Ex. :

-webkit-background-clip:border-box;
-moz-background-clip:border-box;
background-clip:border-box;
Copy the code

(2) background – origin

Background-origin is used to specify the origin of the background image. By default, the origin of the background image is always the upper left corner within the border of the element.

Grammar:

background-origin:border-box|padding-box|content-box;
Copy the code
  • Border-box: indicates that the origin position is the beginning position of the border area
  • Padding-box: Indicates that the origin position is the beginning position of the inner border area
  • Content-box: indicates that the origin position is the beginning position of the content area

Ex. :

-webkit-background-origin:border-box;
-moz-background-origin:border-box;
background-origin:border-box;
Copy the code

(3) background – size

Background-size specifies the size of the background image.

Grammar:

Background - size: [< length > | < percentage > | auto] {1, 2} | cover | contai;Copy the code
  • <length>: Sets the width of the background image
  • <percentage>: Sets the height of the background image

(If width and height are given only one value, set the second value to auto.)

  • Cover: Maintain the width and height ratio of the background image itself. Scale the image to exactly cover the defined background area. Some images may be cropped
  • Contai: Maintains the width to height ratio of the background image itself and scales the image to fit the defined background area, but may not completely cover the background area

Ex. :

background-size:30% 30%,60% 60%, 100% 100%;
Copy the code
3. Text attributes
attribute describe
text-shadow Shadows can be applied to text
text-overflow Overflow text processing properties
word-wrap Allows long indivisible words to be split and newline to the next line
@ the font the forum rules Font customization function

(1) the text – shadow

Text-shadow Applies a shadow to text. Can specify horizontal shadows, vertical shadows, blur distance, and shadow color

Grammar:

text-shadow: length | length | opacity | color;Copy the code
  • Length: indicates the horizontal and vertical offset of the shadow relative to the text itself (can be negative)
  • Opacity: indicates the distance from which the shadow effect is blurred (it cannot be negative, 0 indicates no opacity)
  • Color: indicates the color value of the shadow

Ex. :

text-shadow:5px 5px 3px # 333;
Copy the code

(2) the text – overflow

Text-overflow overflows text processing properties

Grammar:

text-overflow: clip | ellipsis | ellipsis - word;Copy the code
  • Clip: Clipping the overflowed text
  • Ellipsis: Ellipsis symbol is displayed when text overflow, replacing the last character
  • Ellipsis -word: also indicates that ellipsis marks are displayed when text overflows, in place of the last word

Ex. :

overflow:hidden; /* Set overflow to hide */ white-space:nowrap; /* Force text to display in a single line */ text-overflow:ellipsis; /* Sets the overflow text to be displayed as an ellipsis flag */Copy the code

(3) the word – wrap

Grammar:

word-wrap: normal | break - word |;Copy the code
  • Normal: represents the default continuous text newline, allowing content to go out of bounds
  • Break-word: Allows line breaks within words

Ex. :

p.test {word-wrap:break-word; }Copy the code

(4) @font-face rule

CSS3 has added the font customization function, using the @font-face rule to reference any font that exists in any server on the Internet.

Grammar:

@font-face:{attribute: value; }Copy the code

The attributes and values are:

  • Font-family: Sets the font name of the text, which can be referenced as a font
  • Font-style: Set the text style
  • Font-variant: Sets whether text is small uppercase
  • Font-weight: Sets the weight of the text
  • Font-stretch: Sets whether the text is stretched horizontally
  • Font-size: Set the text size
  • SRC: Sets the relative path or absolute path of the customized font, including format information

Example: Specify a font named “myFirstFont” and specify where to find its URL:

@font-face {
    font-family: myFirstFont;
    src: url('Sansation_Light.ttf'),
    url('Sansation_Light.eot'); /* IE9 */
}
Copy the code
4. Color properties

(1) HSL mode

Values:

  • H: Hue. 0(or 360) is red, 120 is green, 240 is blue, and other values can be used to specify colors. The value ranges from 0 to 360
  • S: Saturation. The value ranges from 0.0% to 100.0%
  • L: Lightness. The value ranges from 0.0% to 100.0%

Example: HSL (360,50%,50%) red

<style type="text/css">
body{
    background:rgba(0.0.255.0.5);
}
div{
    width:300px;
    height:300px;
    background:hsl(140.50%.50%);
    position:absolute;
    top:0;
    left:0;
}
</style>
<body>
    <div></div>
</body>
Copy the code

(2) HSLA mode

Values:

  • H: Hue. 0(or 360) is red, 120 is green, 240 is blue, and other values can be used to specify colors. The value ranges from 0 to 360
  • S: Saturation. The value ranges from 0.0% to 100.0%
  • L: Lightness. The value ranges from 0.0% to 100.0%
  • A: Alpha transparency. The value ranges from 0 to 1.

Example: HSL (360,50%,50%,0.5) red

<style>
body{
    background:HSL(0.100%.50%)}div{
    width:300px;
    height:300px;
    background:HSLA(230.100%.50%.0);
    position:absolute;
    top:0;
    left:0;
}
</style>
</head>
<body>study hard and make progress every day<div></div>
</body>
Copy the code

(3) RGBA

Values:

  • R: red value. The percentage of positive integer |
  • G: green value. The percentage of positive integer |
  • B: Blue value. The percentage of positive integer |
  • A: Alpha transparency. The value ranges from 0 to 1.

Example: rgba(255,0,0,0.5) translucent red

<style type="text/css">
    body{
        background:rgba(255.0.0.1)}div{    
        width:300px;
        height:300px;
        background:rgba(0.0.255.0.4);
        position:absolute;
        top:0;
        left:0;
    }
</style>
<body>study hard and make progress every day<div></div>
</body>
Copy the code

The last

CSS3 related interview questions

  • Horizontal and vertical middle method
  • Three-column layout (middle fixed adaptive width on both sides)
  • Methods for cleaning up floating elements and the pros and cons of each
  • CSS implements adaptive squares
  • CSS3 new pseudo classes have those
  • What’s new in CSS3
  • Please explain the Flexbox (flexible box layout model) of CSS3 and how it applies
  • What is the difference between rGBA () and opacity
  • .

Front-end learning notes, big factory interview questions and other PDF can be shared, you can add here Q skirt:624369675Get it for free!Copy the code