css: How to set the transparency of box-shadow?
Today I discovered that using the box-shadow attribute can add a shadow effect to p very well, but if the added effect is:
-moz-box-shadow:0 4px 4px #999; -webkit-box-shadow:0 4px 4px #999; box-shadow:0 4px 4px #999;
The color set using # has no transparent effect. Set the color of the shadow in this way. If the location where the shadow falls is not white, or even dynamic, for example, if it falls on a slide, several pictures of different colors will rotate. Then setting the shadow color like this will make the shadow effect look fake!
Solution: Use rgba instead.
-moz-box-shadow:0 4px 4px rgba(0, 0, 0, 0.4); -webkit-box-shadow:0 4px 4px rgba(0, 0, 0, 0.4); box-shadow:0 4px 4px rgba(0, 0, 0, 0.4);
Let me explain here:
ie6 and ie7 should not support the box-shadow attribute.
You can use: *filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color="#888888"); instead
Because the shadow I set is not It is not required to display in all browsers. So I didn't add this line of code, so I didn't verify whether it is feasible to replace the color in Color="#888888" with rgba here. Friends who need it can verify it by themselves. I guess it will be annoying!
My principles:
As long as there are no problems such as layout misalignment, I will not make compatibility modifications.
For the small number of die-hards who do not upgrade their browsers, there is no need to add a line of redundant code. Since you are using an old version of the browser, it is certain that the effect you see is not beautiful enough.
The reason why many old versions of IE browsers still exist today is because they are used to the front end!
The above is the detailed content of css: How to set the transparency of box-shadow?. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

The win10 system has many relatively new features. Some friends want to make their win10 system more personalized, so they want to set the taskbar transparency to look cooler. So how to set the transparency of the win10 taskbar? The editor below will teach you how to set the transparency of the win10 taskbar. The specific method is as follows: 1. Turn on the computer, move the mouse to the taskbar, then right-click the taskbar, find "Taskbar Settings" in the window and click it. 2. After clicking on the "Taskbar Settings" window, find the "Color" option and click on it. In the "Color" setting interface, you can set the taskbar color you like. You can choose the Windows color or customize the color. Select After choosing the color, find the “Transparency Effect” below.

The method of implementing the transparency gradient effect using CSS properties requires specific code examples. In web design, the transparency gradient effect can add a soft and beautiful transition effect to the page. Through the setting of CSS properties, we can easily achieve the transition effect on transparency of different elements. Today we will introduce some common methods and specific code examples. Use the opacity attribute. The Opacity attribute can set the transparency of an element. The value ranges from 0 to 1. 0 means completely transparent and 1 means completely opaque. we can pass

The transparency of the wake-up image is in "Special Effects->Adjustment Parameters". The specific method to set the transparency of the image is: 1. Open the wake-up image app; 2. Click "Import" and select "Favorite Pictures" to open; 3. Find at the bottom of the page And click "Special Effects", then click "Adjust Parameters", click "Transparency", and slide the tick mark to set the transparency.

Vue and Canvas: How to adjust the transparency and blending mode of images In web development, we often need to process images, including adjusting the transparency and blending mode of images. Vue and Canvas are two commonly used technologies that work well together to achieve these functions. This article will introduce how to use Vue and Canvas to adjust the transparency and blending mode of images, and provide corresponding code examples. Transparency adjustment refers to changing the visibility of an image. In Vue, you can bind

We usually can insert pictures into PPT when making it, but some friends who have just learned how to set the transparency of pictures in PPT still don’t know how to achieve it. So today I will teach you the specific steps. As shown below. 1. First, open and create a new PPT document on your computer (as shown in the picture below). 2. Next, select [Insert]-[Shape] in the upper toolbar, select a rectangle and draw it on the blank canvas (as shown in the red circled part and the red arrow in the figure below). 3. Then, select [Fill] in the upper toolbar (as shown in the red circled part and the red arrow in the figure below). 4. Next, select [More Settings] in the [Fill] dialog box, (as shown in red below

The computer has been upgraded to win10. Microsoft has retained the taskbar transparency effect in Windows 10, but there is no option to adjust the transparency. So how to adjust the transparency of the Win10 system taskbar? Next, the editor will tell you how to adjust the transparency of the taskbar in Win10 system. Everyone is very familiar with the taskbar of Win10 system, which is located at the bottom of the screen. Generally speaking, the interface of this taskbar is set by default in Win10 system. Both color and transparency are set by default. If you want to adjust the transparency of the taskbar, how can you adjust the transparency of the taskbar in Win10 system? ?Let’s take a look at the editor’s operation. How to adjust the transparency of the Windows 10 system taskbar

How to use CSS to achieve the transparency gradient effect of elements In web development, adding transition effects to web page elements is one of the important means to improve user experience. The gradient effect of transparency can not only make the page smoother, but also highlight the key content of the element. This article will introduce how to use CSS to achieve the transparency gradient effect of elements and provide specific code examples. Using the CSS transition attribute To achieve the transparency gradient effect of an element, we need to use the CSS transition attribute. t

Guide to CSS rendering properties: Introduction to box-shadow and text-shadow: In web design and development, by using the rendering properties of CSS, you can add shadow effects to page elements to make them more three-dimensional and visual. This article will focus on two commonly used CSS rendering properties: box-shadow and text-shadow, and provide specific code examples. 1. box-shadow: The box-shadow attribute can be used to add a shadow to an element.
