Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to use css how to make a semicircle related knowledge, content detailed and easy to understand, simple and fast operation, has a certain reference value, I believe we read this article how to use css how to make a semicircle article will have some harvest, let's take a look at it.

1. How to make a semicircle with CSS? (Idea: control of style border-radius and width)

copy code

div{

display: inline-block;

border:1px solid #6baabb;

width:40px;

height:40px;

float:left;

margin:0px 10px;

}

a{

display: inline-block;

width:40px;

height:40px;

background: #6baabb;

}

.Round{

border-radius:20px;

}

.LeftRound{

width:20px;

border-radius:20px 0px 0px 20px;

}

.RightRound{

width:20px;

border-radius:0px 20px 20px 0px;

}

.TopRound{

height:20px;

border-radius:20px 20px 0px 0px;

}

.BottomRound{

height:20px;

border-radius:0px 0px 20px 20px;

}

2. That is, when there is content in the tag a, you can no longer control the width and height of the tag a, but you do not want to introduce pictures as background. In this case, use the linear gradient attribute of css3.

(Idea: A circle that will show itself without a semicircle with a white background)

background:linear-gradient(to top, #fff 0%, #fff 45% ,#6baabb 50%,#6baabb);

background:linear-gradient(to bottom, #fff 0%, #fff 45% ,#6baabb 50%,#6baabb);

About "how to use css how to make a semicircle" the content of this article is introduced here, thank you for reading! I believe everyone has a certain understanding of "how to make a semicircle with css" knowledge. If you still want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.