This article introduces the basic concepts and functions of CSS (Cascading Style Sheets), and then discusses 10 commonly used CSS properties in depth. These properties include border, background, positioning, box model, etc. Each property has a section explaining what it does, syntax and usage examples.
The article also contains some best practice recommendations for CSS development, such as using external style sheets, avoiding abusive !importantrules, and performance considerations for selectors. The author also provides some useful resources and links for readers to learn and explore further.
Below is the text~~
Here are 10 properties that you've probably rarely used or never heard of, but once you know them, you'll love them.
custom scroll bar
Let's change the width and color of the scrollbar, and also make it slightly rounded.
Below are the various parts of the scrollbar.
We use ::-webkit-scrollbar to change properties.
/* 设置滚动条的宽度 /
::-webkit-scrollbar{
width: 10px;
}
/ 将轨道改为蓝色并设置圆角边框 /
::-webkit-scrollbar-track{
background-color: blue;
border-radius: 10px;
}
/ 将滑块（显示滚动量）改为灰色并设置圆角 /
::-webkit-scrollbar-thumb{
background: gray;
border-radius: 10px;
}
/ 悬停时显示为深灰色 */
::-webkit-scrollbar-thumb:hover{
background: darkgray;
}
NOTE: This is a non-standard attribute, it will not work without -webkit- the prefix.
mouse pointer style
Changes the style of the mouse pointer when the mouse is over an element.
/* class为'first'的元素 /
.first{
cursor: not-allowed;
}
/ class为'second'的元素 /
.second{
cursor: zoom-in;
}
/ class为'third'的元素 */
.third{
cursor: crosshair;
}
Scroll behavior
The scrolling behavior enables smooth scrolling, making transitions between different sections of the page smoother.
Add the following simple line of code and experience the effect for yourself.
html{
scroll-behavior:smooth;
}Instead of simply switching pages instantaneously to the next section, scroll smoothly to the appropriate section. Check out the effect here.
https://www.w3schools.com/cssref/tryit.php?filename=trycss_scroll_behavior
accent-color
Change the color of user interface such as form controls and checkboxes.
See how the color of the checkboxes and radio buttons is blue instead of the default (boring) gray.
input{
accent-color: blue;
}That's it. You can use selectors to make some input fields blue, some red, and some green.
And this doesn't change the color of the text, so you can experiment with various colors. The color of the user interface is controlled by us.
Aspect Ratio
Constantly checking height and width can be a headache when building responsive components because you have to maintain the aspect ratio. Sometimes videos and pictures may appear stretched.
That's why we can use the aspect ratio property. Once you set the aspect ratio value and then set the width, the height is set automatically. Or vice versa.
/* class为example的元素 /
.example{
/ 设置纵横比 /
aspect-ratio: 1 / .25;
/ 设置宽度后，高度会自动设置 /
width: 200px;
/ 边框不是必需的，但这里只是为了看效果而添加的 */
border: solid black 1px;
}Now that we set the width, the height will be automatically set in 50 pixels to maintain the aspect ratio. This is very useful for reactive behavior.
Box Reflect
Box Reflect is able to create its reflection effect underneath the component. For this demo, I used an SVG wave image, which I got through this website.
https://getwaves.io/
/* class为'example'的元素 /
.example{
/ 反射将显示在下方。其他可能的值有 above（上方） | left（左侧） | right（右侧） */
-webkit-box-reflect: below;
}This will create a reflection effect underneath the SVG.
We can also offset the reflection a bit:
/* An element with class name 'example */
.example{
/* The reflection will appear below. Other possible values are above | left | right */
-webkit-box-reflect: below 20px;
}
Also, I want it to tone down a bit. We can use it gradient .
/* An element with class name 'example */
.example{
/* The reflection will appear below. Other possible values are above | left | right */
-webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.5));
}
How to check if a specific property is supported in CSS
To check if a particular property is supported in CSS, you can use @supports rules. Here is an example:
@supports (display: flex) {
/* 如果支持 */
/* 在这里放置针对支持该属性的样式规则 */
}
@supports not (display: flex) {
/* 如果不支持 */
/* 在这里放置针对不支持该属性的备用样式规则 */
}In the above code, with @supports rules, we can specify an attribute within the brackets, and then execute the corresponding style rule according to whether the attribute is supported or not. If the attribute is supported, the style rules in the first rule block are executed, and if the attribute is not supported, the alternate style rules in the second rule block are executed.
For example, the ( ) in the above example display: flexmeans to check whether the browser supports display: flex the attribute. If supported, the style rules in the first rule block are executed; if not, the alternate style rules in the second rule block are executed.
This method can be used to check the support of any CSS property, so that different style rules can be applied according to the support.
Masks
Image masks can be used in CSS.
/* class为'example'的元素 /
.example{
/ 从URL设置遮罩 */
-webkit-mask: url(你的URL);
mask: url(你的URL);
}In a mask image, white represents the masked area and black is the area to be cropped.
Filter
We can add amazing filter effects to images using CSS. Filter effects are a feature we see in every photo sharing app, now let's see how easy they are to implement.
img{ filter: /* 你的值 */; }
There are many filter effects available. Filter effects such as Blur, Brightness, Saturation, etc. can be used. You can make the image grayscale, change the opacity, invert the colors, and more.
Address: https://www.w3schools.com/cssref/css3_pr_filter.php
Backdrop effects
We can use this backdrop-filterto add nice filter effects to the area behind the image.
backdrop-filterfilterAll properties provided . In short, it is a filter effect applied to the background.
Note that backdrop-filterthe attribute may not be fully supported in some browsers, make sure to check for compatibility when using it.
<div class="image">
<div class="effect">
backdrop-filter: blur(5px);
</div>
</div>
<style>
.image{
background-image: url(YOUR URL);
background-size: cover;
width: 400px;
height: 400px;
display: flex;
align-items: center;
justify-content: center;
}
.effect{
font-size: x-large;
color: white;
font-weight: 800;
background-color: rgba(255, 255, 255, .3);
backdrop-filter: blur(5px);
padding: 20px;
}
</style>This has the effect of:
Make your website look professional by knowing these 10 new CSS properties.