The use of shadow effects has become more and more widespread in development, so today we will talk about using the same technique to achieve border shadows. Below, the editor of Script House brings you the Html/CSS front-end to realize the text border shadow effect. Friends who need it can refer to it. I hope it can help everyone.
1. Border shadow
box-shadow Border shadow
Parameters: Parameter 1 x-shadow: Set the object’s shadow horizontal offset value, the unit can be px, em Or percentage, etc., negative values are allowed. Parameter 2 y-shadow: Set the vertical offset value of the object's shadow. The unit can be px, em or percentage, etc. Negative values are allowed. Parameter 3 blur: used to set the border shadow radius size. Parameter 4 spread: Expand radius, set the size of the shadow; this parameter is optional, and the default value is 0. Parameter 5 color: Set the color of the shadow. Parameter 6 inset: This parameter is not set by default. The default is outer shadow, inset means inner shadow.
box-shadow:x-shadow y-shadow blur spread color inset;
2. Example
Effect 1
1 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
|
Use the box-shadow property of CSS3 to create a border shadow Effect method
css3 rounded border, border shadow_html/css_WEB-ITnose
css to achieve border shadow effect_html/css_WEB- ITnose
The above is the detailed content of Html/CSS front-end implementation of text border shadow effect example sharing. For more information, please follow other related articles on the PHP Chinese website!