The composition of the element border attribute in css and the combination of the attribute value transparent can get some special shapes: 1.0, bordertransparent
In css, we often use the border attribute and attribute value transparent of elements. Many people may not understand the structure of border and the effect of transparent;
1. The structure of border is as follows:
Html section: <body> Css section: <Style> h4, div {margin: 0;}. bodrShape1,. bodrShape2,. bodrShape3 {border: 10px solid transparent; float: left; margin: 0px 5px ;} 1.1/* The border attribute is frequently used as follows */. BodrShape3 {width: 10px; height: 10px; border-color: red green blue black ;}Effect;Http://images2015.cnblogs.com/blog/1159830/201705/1159830-20170507123427289-503405871.png
1.2/* border composition -- set the width and height of the element to zero, display the border, and visible the composition of the border */. BodrShape1 {width: 0px; height: 0px; border-color: red green blue black ;}Effect: border consists of four triangles.Http://images2015.cnblogs.com/blog/1159830/201705/1159830-20170507123440773-1246158280.png
1.3 /* Hide the other three edges with transparent to obtain the edges of the corresponding triangle shape */. BodrShape2 {width: 0px; height: 0px; border-left-color: black;} </style>
Effects: Various triangle shapes can be created;Http://images2015.cnblogs.com/blog/1159830/201705/1159830-20170507123452664-1053704858.png
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
