Shulou(Shulou.com)06/02 Report--

This article mainly introduces what the css3 shows hidden special effects code, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

Code: 1, "display:none", can make the element do not occupy the original position to hide; 2, "visibility:hidden", can make the element occupy the original position to hide; 3, "overflow:hidden", hide beyond the element box; 4, "opacity:0", can make the element transparent and hidden.

The operating environment of this tutorial: windows10 system, CSS3&&HTML5 version, Dell G3 computer.

Css3 shows what the hidden special effects code is.

In css, there are four ways to set the element hiding effect.

1. The display attribute can set the element not to occupy the original position and hide it.

The display attribute specifies the type of box that the element should generate. This element is not displayed when the property value is none.

Examples are as follows:

P {display: inline} div {display: none}

The stylesheet in this example sets paragraph elements to inline elements.

The div element will not be displayed!

The contents of the div element will not be displayed!

Output result:

2. Visibility attribute can be set to hide the element in its original position.

The visibility attribute specifies whether the element is visible. This attribute specifies whether to display an element box generated by an element. This means that the element still occupies its original space, but it can be completely invisible. The value collapse is used in the table to delete columns or rows from the table layout.

Examples are as follows:

H2.visible {visibility:visible} h2.invisible {visibility:hidden} this is the visible title and this is the invisible title.

Output result:

3. Overflow attribute can be set to hide beyond the element box.

The overflow attribute specifies what happens when the content overflows the element box. When the property value is hidden, the content is trimmed and the rest of the content is not visible.

Examples are as follows:

Div {background-color:#00FFFF;width:150px;height:150px;overflow: hidden;}

If the content in the element exceeds the given width and height attributes, the overflow attribute determines whether behaviors such as scroll bars are displayed.

This attribute defines what happens to the content that overflows the content area of the element. If the value is scroll, the user agent provides a scrolling mechanism whether it is needed or not. Therefore, it is possible that a scroll bar will appear even if everything can be dropped in the element box. The default value is visible.

Output result:

4. Opacity can set elements to be transparent and hidden.

The opacity property sets the opacity level of the element.

Examples are as follows:

.div1 {background-color:red;opacity:0.5;filter:Alpha (opacity=50); / * IE8 and earlier browsers * /} .div2 {opacity:0;} the opacity of this element is 0.5. Note that both the text and the background color are affected by the level of opacity. The opacity of this element is 0. Note that both the text and the background color are affected by the level of opacity.

Output result:

Thank you for reading this article carefully. I hope the article "what are the hidden special effects codes in css3" shared by the editor will be helpful to you? at the same time, I also hope you can support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.