Use the Box-shadow property to implement a fillet effect code instance:
Generally, we use Border-radius to achieve rounded corners, but we can also use the Box-shadow property.
The specific usage of two attributes is not introduced here, specifically, you can refer to the following two articles:
(1). Fillet effects can be found in the section CSS3 to achieve rounded corners .
(2). Box-shadow can be found in the CSS3 Box-shadow attribute Usage section.
code example:
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"><Metaname= "Author"content= "http://www.softwhy.com/" /><title>Ant Tribe</title><styletype= "Text/css">. Antzone{margin:100px;width:100px;Height:100px;Border-radius:1px;Box-shadow:0 0 0 30px #cd0000;}</style></Head><Body><Divclass= "Antzone"></Div></Body></HTML>
The above code implements our requirements, the following simple introduction.
The length and width of the set element is 100px, and the Border-radius value is 1px, which means that the element itself has a certain fillet effect, which is of course useful.
If the value of Box-shadow is:: 0 0 0 0 #cd0000, then the projection coincides with the element.
However, we set the expansion effect to 30px, then the outward expansion of 30px, then the fillet effect is very obvious.
The original address is: http://www.softwhy.com/forum.php?mod=viewthread&tid=18266
For more information, refer to: http://www.softwhy.com/divcss/
Use the Box-shadow property to implement a fillet effect code instance
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
