首页 > Web开发 > 详细

[CSS 3] Use the Border-Radius CSS Property to Define Horizontal and Vertical Radius

时间:2020-07-03 15:58:22      阅读:54      评论:0      收藏:0      [点我收藏+]

In this lesson, we dive into using CSS border-radius. We will look at how you can use it to create not only basic shapes but complex ones too.

We will start with a shorthand notation that allows us to define a uniform radius for an element. Then we will progress onto a longhand notation. That will give us the power to define the horizontal and vertical radius for each corner of an element.

 

.rect {
  border: 1px solid black;
  width: 200px;
  height: 200px;
  
  border-radius: 50% 50% 0 0 / 100% 100% 0 0
}
.rect {
  border: 1px solid black;
  width: 200px;
  height: 200px;
  
  border-radius: 50% 50% 0 0 / 100% 100% 0 0
}

 

 

See the Pen border-radius by Zhentian Wan (@Answer1215) on CodePen.

[CSS 3] Use the Border-Radius CSS Property to Define Horizontal and Vertical Radius

原文:https://www.cnblogs.com/Answer1215/p/13230693.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!