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

Most people don't understand the knowledge points of this article "how to achieve transparency effect in css3", so Xiaobian summarizes the following contents for everyone. The contents are detailed, the steps are clear, and they have certain reference value. I hope everyone can gain something after reading this article. Let's take a look at this article "how to achieve transparency effect in css3".

CS3 is transparent.

CSS 3 can be achieved by setting RGBA transparent effect.

RGBA adds Alpha channel to RGB, and transparency effect can be realized by setting Alpha value.

rgba(255,255,255,0)

R: red value. Positive integer or percentage

G: Green value. Positive integer or percentage.

B: Blue value. Positive integer or percentage.

A: Transparency. Values are between 0 and 1.

HTML code

gas

efforts

struggle

ziqiang

css code:

nav ul{ background:linear-gradient(90deg,rgba(255,255,255,0)0%,rgba(255,255,255,0.2)25%,rgba(255,255,255,0.2)75%,rgba(255,255,255,0)100%);

box-shadow:0 0 25px rgba(0,0,0,0.1),

inset 0 0 1px rgba(255,255,255,0.6); }

nav ul li{display:inline-block;}

nav ul li a{padding:10px; color:#FFFFFF; font-size:18px; font-family:Arial; text-decoration:none; display:block;}

Because display:inline-block; is used, the unordered list appears in one line. If you remove the nav ul li{display:inline-block;}, of course, this line of code can also be written li{ display: inline-block; } li element nested inside the nav element and ul element.

CSS3 Text Shadow

The text-shadow property defines one or more comma-separated shadow effects to apply to the text content of the current element.

text-shadow attribute format:text-shadow:x-offset(required) y-offset(required) blur(optional) color(optional);

The color value is not required, but since the default value for text shadows is transparent, text shadows are not displayed unless a color value is specified.

css code:

p.text-shadow{text-shadow:-10px 5px 5px red;font-size:20px; }

The text-shadow property can be used to divide multiple shadows created simultaneously by commas.

Shadow effects defined earlier in CSS 3 will be placed higher up (above other shadows), and vice versa.

The above is the content of this article about "how to achieve transparency effect of css3". I believe everyone has a certain understanding. I hope the content shared by Xiaobian will be helpful to everyone. If you want to know more relevant knowledge content, please pay attention to the industry information channel.

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.