New style attributes
Web font
By @font-faceproperty, you can import external font file
@font-face {
font-family:"bf";
src: url(bf.TTF);
}
Font icon
Make the icon into a font package, so that we can treat the icon as a word, align the size and color, and realize the color change of the
icon.
Text shadow
text-shadow: h-shadow(x) v-shadow(y) blur(模糊半径) color(颜色)
1. The positive value of the horizontal offset goes to the right and the negative value goes to the left
2. The positive value of the vertical offset is down and the negative value is up.
3. The blur radius cannot be negative
4. There can be multiple shadows, separated by commas
5. Case: embossed text
concave: text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
Convex: text-shadow: -2px -2px 1px #fff, 2px 2px 1px #000;
Blurred text: text-shadow:0 0 100px rgba(0,0,0,0.5);
Text stroke: -webkit-text-stroke: 4px pink;
Box shadow
box-shadow: h-shadow(x) v-shadow(y) blur(模糊半径) spread(扩展范围) color(颜色) inset(是否内嵌,可省略)
Reflection
-webkit-box-reflect Generate reflection, support above below right left
Add spacing: -webkit-box-reflect: below 10px;
Add gradient: -webkit-box-reflect: below 0 linear-gradient(transparent, white);
Color HSL
HSL refers to hue (hue), saturation (saturation), lightness (brightness)
The HSL color value is specified as follows: hsl(hue, saturation, lightness).
- Hue is the degree on the color wheel (from 0 to 360). 0 (or 360) is red, 120 is green, and 240 is blue.
- Saturation is a percentage value; 0% means gray, and 100% means full color.
- Lightness is also a percentage value; 0% is black and 100% is white.
p{
background-color:hsl(120,65%,75%);
}
Fillet properties
.box{
border-radius:8px;
}
.d1{
border-radius:4px 8px;
}
.d2{
border-radius: 4px/8px;
}
CSS3 box model (weird box model)
In CSS3, the box model can be specified by box-sizing, which can be specified as content-box, border-box, so that the way we calculate the box size has changed
content-box: The actual width of the object is equal to the set width value and the sum of border and padding (default method)
border-box: The actual width of the object is equal to the set width value, even if border and padding are defined, it will not change the actual width of the object, that is (Element width = width ), we call this method css3 box model