Home > Developer > Web Develop
Today, I found that using CSS can make a beautiful sewing-style border (a bit like border's dashed style),
First put:
Very beautiful, in fact, the main CSS is to border-style:dashed plus Box-shadow, and then with Border-radius decoration, choose a beautiful color can design a better frame!
Put the code: stitched.html
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "Utf-8"> <title>HTML CSS Exercise Create a CSS based Grid layout</title> <style>. Stitched{width:200px;padding:20px;margin:10px;background:#0d90df;Border:2px Dashed #fff;Border-radius:10px;Box-shadow:0 0 0 4px #0d90df, 2px 1px 6px 4px Rgba (Ten, 0, 0.5); } </style> </Head> <Body> <Divclass= "stitched"></Div> </Body></HTML>
Let me introduce the usage of Box-shadow:
Box-shadow: Describes one or more shadow effects as a comma-delimited list, as the above code has two shadow effects: 0 0 0 4px #0d90df and 2px 1px 6px 4px rgba (10, 10, 0, 0.5), and this property can be used for almost any label.
Box-shadow Syntax:
/*offset-x | offset-y | color*/box-shadow:60px-16px Teal;/*offset-x | offset-y | blur-radius | color*/box-shadow:10px 5px 5px Teal;/*offset-x | offset-y | blur-radius | spread-radius | color*/box-shadow:2px 2px 2px 1px teal;/*Inset | offset-x | offset-y | color*/box-shadow:inset 5em 1em Teal;/*Any number of shadows, separated by commas*/box-shadow:3px 3px Orange, -1em 0 0.4em Teal;
The effects are: (plus some of the code in the previous example)
-
"1"
--Blur-radius (blur radius) This picture can explain blur better:
--This chart is more of a blur effect:
We can clearly see the addition of the Blur-radius blur radius, the original entity shadow is actually expanded outward, especially the right-most figure will increase the blur radius, the border of the 4 edges have a shadow effect.
(There are three block diagram codes for: [1] box-shadow:5px 10px 10px red; [2] box-shadow:5px 10px 20px red; [3] box-shadow:5px 10px 50px red;
Citation material: HTTP://WWW.JIANSHU.COM/P/1303B96661B9)
"2"
Spread-radius: Shadow expansion radius. This parameter is optional, positive values represent shadow expansions, and negative values indicate a shadow shrink. (In "2" the second picture has spread)
"3"
You can see that the inset attribute used here is the inner shadow
[4]
Haha, finally to a number of shadow settings, separated by commas can yo!
"5"
PS: The first time to find teal this color is really beautiful, coupled with fuzzy shadow, a lot of colors have become good beautiful! (Blue and Cyan match up really good-looking) to try it!
Draw a border of a sewing kit effect with CSS
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
