HTML – 如何创建圆角矩形形状Css？

概述我正试图设计一个像这样的轮廓图像形状 但我的代码给了我以下设计 我担心边框内的空白区域,这里的形状是代码 .doctor-profile-photo { width: 210px; height: 210px; border-radius: 60px/140px; border: 5px solid #000; box-shadow: 0px 2px 5px #ccc;}. 我正试图设计一个像这样的轮廓图像形状

但我的代码给了我以下设计

我担心边框内的空白区域,这里的形状是代码

.doctor-profile-photo {  wIDth: 210px;  height: 210px;  border-radius: 60px/140px;  border: 5px solID #000;  Box-shadow: 0px 2px 5px #ccc;}.doctor-profile-photo img {  wIDth: 100%;  height: 100%;  border-radius: 60px/140px;}

<div >  <img src="http://wekNowyourdreams.com/images/bird/bird-09.jpg" alt=""></div>

解决方法 这给出了你想要的非常相似的输出.尝试调整border-radius和height-wIDth的值,以达到您想要的效果.

<style> #pic {     position: relative;         wIDth: 130px;     height: 150px;     margin: 20px 0;     background: red;     border-radius: 50% / 10%;     color: white;     text-align: center;     text-indent: .1em; }  #pic:before {     content: '';     position: absolute;     top: 10%;     bottom: 10%;     right: -5%;     left: -5%;     background: inherit;     border-radius: 5% / 50%;  } </style><div ID="pic"></div>

这是一个有用的链接：https://css-tricks.com/examples/ShapesOfCSS/

总结

以上是内存溢出为你收集整理的HTML – 如何创建圆角矩形形状Css？全部内容，希望文章能够帮你解决HTML – 如何创建圆角矩形形状Css？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。