代码之家 › 专栏 › 技术社区 › LSH

无边框半径的圆形边框

html4 web css html

LSH · 技术社区 · 9 年前

HTML4 , CSS2 我如何创建 <div> 或 <table> 什么是圆形边界?

4 回复 | 直到 9 年前

Hash 9 年前

发现了一些相关信息。参考- LINK

.b1,
.b2,
.b3,
.b4 {
  font-size: 1px;
  overflow: hidden;
  display: block;
}

.b1 {
  height: 1px;
  background: #888;
  margin: 0 5px;
}

.b2 {
  height: 1px;
  border-right: 2px solid #888;
  border-left: 2px solid #888;
  margin: 0 3px;
}

.b3 {
  height: 1px;
  border-right: 1px solid #888;
  border-left: 1px solid #888;
  margin: 0 2px;
}

.b4 {
  height: 2px;
  border-right: 1px solid #888;
  border-left: 1px solid #888;
  margin: 0 1px;
}

.contentb {
  border-right: 1px solid #888;
  border-left: 1px solid #888;
}

.contentb div {
  margin-left: 5px;
}

<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="contentb">
  <div>Round Border!!</div>
</div>
<b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>

jswebb 9 年前

svg 黑客方法,例如:

<svg width="500" height="400">
  <path d="M50,25 h300 a20,20 0 0 1 20,20 v200 a20,20 0 0 1 -20,20 h-300 a20,20 0 0 1 -20,-20 v-200 a20,20 0 0 1 20,-20 z" fill="none" stroke="#0089cc" stroke-width="2" />
</svg>

或者你可以在Photoshop/GIMP中创建一个透明的图像,它有一个带有圆形边缘的边界。然后,你可以只使用CSS background-image div 你想成为目标。

Ramin Ahmadi 9 年前

  #header {
            float: left;
            width: 100%;
            font-size: 93%;
            line-height: normal;
        }
        
        #header ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
        #header li {
            float: left;
            background: url("https://image.ibb.co/kPAMhv/norm_right.gif") no-repeat right top;
            margin: 0;
            padding: 0;
        }
        
        #header a {
            display: block;
            background: url("https://image.ibb.co/f01GFF/norm_left.gif") no-repeat left top;
            padding: 5px 15px;
        }

  <div id="header">
        <ul>
            <li><a href="#">Link1</a></li>
            <li><a href="#">Link2</a></li>
            <li><a href="#">Link3</a></li>
        </ul>
    </div>

-2

Theerockzz 9 年前

//意识到你在使用css2

/*Your Id/class*/
div {
  border: 2px solid black;
  border-radius: 25px 50px 10px 23px;
}

可以输入多个值来指定每条边。这些值的模式是: 左上右下左下右

四个值: 第一个值适用于左上角,第二个值应用于右上角,第一个值应用到右下角,第四个值适用到左下角
第一个值应用于左上角,第二个值适用于右上角和左下角,第三个值应用到右下角
一个值: 所有四个角均为等圆

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

1 年前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前