Home > Developer > Web Develop
CSS implements multiple borders
1 <!DOCTYPE HTML>2 <HTMLLang= "ZH-CN">3 <Head>4 <MetaCharSet= "UTF-8">5 <title>CSS implements multiple borders</title>6 <style>7 Div{8 width:100px;9 Height:150px;Ten margin:40px Auto; One text-align:Center; A background:LightBlue; - Border:20px Solid Cornflowerblue; - } the #box1{ - Outline:5px Solid Chocolate; - Outline-offset:-10px; /*The border of the outline stroke simulation is inside the true border, but the stroke has no way to fit the fillet position .*/ - } + #box2{ - /*The box shadow implements a double border, and the fourth parameter represents the projected expansion of the pixel, "," separating the drawing of multiple projections*/ + -webkit-box-shadow:0 0 0 5px Brown, A 0 0 0 10px Yellow, at 0 0 0 15px Green; - -moz-box-shadow:0 0 0 5px Brown, - 0 0 0 10px Yellow, - 0 0 0 15px Green; - Box-shadow:0 0 0 5px Brown, - 0 0 0 10px Yellow, in 0 0 0 15px Green; - -webkit-border-radius:20px; to -moz-border-radius:20px; + Border-radius:20px; - } the </style> * </Head> $ <Body>Panax Notoginseng - <DivID= "Box1">Box1</Div> the <DivID= "Box2">Box2</Div> + <H1>Box1 and Box2 are not plotted in a way that affects the layout</H1> A the </Body> + </HTML>
CSS to achieve the inner concave fillet of the idea "from Mu class network":
CSS for multi-border and inner-concave fillets
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
