Home > Developer > Web Develop
First, Background-clip properties
1 <HTML>2 <Head>3 <MetaCharSet= "Utf-8">4 <title>Background and Border 1</title>5 <styletype= "Text/css">6 Body{7 background:url (' http://csssecrets.io/images/stone-art.jpg ');8 }9 Div{Ten Border:10px solid Hsla (0,0%,100%,.5); One background: White; A Background-clip:Padding-box; - /*If you do not add the Background-clip property, the border is not visible*/ - the Max-width:20em; - padding:2em; - margin:2em Auto 0; - Font:100%/1.5 Sans-serif; + } - </style> + </Head> A <Body> at <Div> - Can I have semi-transparent borders? Pretty please? - </Div> - </Body> - </HTML>
In the above example, if the Background-clip attribute is not added, the border is not visible, because the background will invade the bounding rectangle, where the border is translucent, so the bounding rectangle is not visible, and when the attribute is added, the background cannot invade the border, so it can be seen.
The following is a study of other knowledge points in the code:
1. Rgba and Hsla
The color mode in CSS2 is only RGB (red, green, blue) and 16 binary (#RRGGBB, RR Plus is the value of red in RGB, GG and BB). In order to increase the transparency in CSS3, the RGBA color mode (red, green, Blue,alpha) is added. However, these representations are not intuitive, the final color is a mixture of three primary colors, is not intuitive, so CSS3 increased HSL (hue-hue, saturation-saturation, lightness-brightness) color mode and Hsla; the tonal range is 0~ 360; saturation and brightness are expressed in percentages.
2, Px,em and REM
PX is the size of the relative screen resolution, in pixels.
EM is relative to the current object within the size of the text, for example, the current font is 16PX, then 1em is equal to 16px;
REM is relative to the font size of the root element of the current document, and EM is a little different.
3, Sans-serif
CSS Specifies 5 universal font families, and basically all normal fonts fall into these 5 series, which are:
| Serif | Serif font Family |
| Sans-serif | Non-linear font family |
| Cursive | Handwriting font family |
| Fantasy | Fantasy Font Family |
| Monospace | Equal width font family |
Because these five series contain all the fonts, you can specify the order of the 5 series in the CSS, and what font is used, depending on the font installed on the user's computer.
[CSS] "CSS Secrets" Learning Notes (a)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
