请问以下CSS3 效果：两边是圆角，中间是一条分界线这种效果怎么实现

Posted 2023-04-03

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了请问以下CSS3 效果：两边是圆角，中间是一条分界线这种效果怎么实现相关的知识，希望对你有一定的参考价值。

问题如图，，，我郁闷了，我知道border-radius能实现圆角，但是这中间还有一个线咋办，不会弄，我是做前端的，公司要做网站，好多都不会，基本是边做边学，希望各路大神指点啊，多谢

这是两个按钮或者div，左边的设置左边框圆角，右边的那个设置右边框圆角。具体的参数，你可以参考一下这个教程：
border-radius:2em;

等价于：
border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;

你也可以根据你的需要设置自己需要的边框。比如只设置左上角圆角。自己尝试一下吧。

http://www.w3school.com.cn/cssref/pr_border-radius.asp 参考技术A boder-radius可以分别设置四个角的值，顺序为左上、右上、右下、左下
代码如下：
#div1
border-radius:20px 0 0 20px;
/*border-top-left-radius: 20px;
border-bottom-left-radius: 20px;*/

#div2
border-radius: 0 20px 20px 0;
/*border-top-right-radius: 20px;
border-bottom-right-radius: 20px;*/

求采纳参考技术B 一个border-right不就解决了么参考技术C <div class="box">
<div>左边</div>
<div>右边</div>
</div>

*
margin:0;
padding:0;
box-sizing: border-box;

.box
width: 200px;
border-radius:40px;
border:1px solid #ddd;
line-height: 40px;
overflow: hidden;

.box>div
width:50%;
text-align: center;
float: left;
vertical-align: middle;
background: #ffff00;

.box>div:first-child
border-right:1px solid #ddd;

CSS3文本居中显示圆形圆角绘制立体阴影效果设置实例演示

[ 推荐文章 ]
一篇文章快速掌握 Linux 基本命令

实例演示

① 文本居中显示

通过 div 层的 text-align: center; 先控制文本在横向中间，再根据 margin-top: 48%; 即可控制文本显示在图形的竖向中间部位，值可以根据文本的大小来定位，大约略小于百分之 50%。

代码如下：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>css3演示</title> 
</head>
<body>
	<div><p>圆角</p></div>
</body>
</html>

<style> 
div 
	/* 文本显示在横向中间 */
	text-align: center;
	/* 设置字体 */
	font-family: 微软雅黑;
	/* 宽度和长度 */
	width: 400px;
	height: 400px;
	/* 位置：相对定位 */
	position:relative;
    top:100px;
	left:100px;
	/* 轮廓线，solid表示实心线 */
	border: 1px solid;
	/* 背景颜色 */
	background-color: rgb(167, 231, 17);


p 
	/* 文本显示在纵向中间，大概为50%减去字体的一半长度 */
	margin-top: 48%;

</style>

② 圆角设置

通过 div 的 border-radius: 20px; 可设置圆角，值为圆角的半径大小。

可以指定 4 个值，分别设置左上、右上、右下和左下 4 个圆角的半径大小。
设置 border-radius: 200px 100px 50px 10px; 效果展示。

代码如下：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>css3演示</title> 
</head>
<body>
	<div><p>圆角</p></div>
</body>
</html>

<style> 
div 
	/* 圆角，大小为正方形边长一半时为圆形 */
	border-radius: 20px;
	/* 文本显示在横向中间 */
	text-align: center;
	/* 设置字体 */
	font-family: 微软雅黑;
	/* 宽度和长度 */
	width: 400px;
	height: 400px;
	/* 位置：相对定位 */
	position:relative;
    top:100px;
	left:100px;
	/* 轮廓线，solid表示实心线 */
	border: 1px solid;
	/* 背景颜色 */
	background-color: rgb(167, 231, 17);


p 
	/* 文本显示在纵向中间，大概为50%减去字体的一半长度 */
	margin-top: 48%;

</style>

③ 圆形设置

通过 div 的 border-radius: 200px; 设置圆角为正方形边长一半时即可显示为圆形。

代码如下：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>css3演示</title> 
</head>
<body>
	<div><p>圆角</p></div>
</body>
</html>

<style> 
div 
	/* 圆角，大小为正方形边长一半时为圆形 */
	border-radius: 200px;
	/* 文本显示在横向中间 */
	text-align: center;
	/* 设置字体 */
	font-family: 微软雅黑;
	/* 宽度和长度 */
	width: 400px;
	height: 400px;
	/* 位置：相对定位 */
	position:relative;
    top:100px;
	left:100px;
	/* 轮廓线，solid表示实心线 */
	border: 1px solid;
	/* 背景颜色 */
	background-color: rgb(167, 231, 17);


p 
	/* 文本显示在纵向中间，大概为50%减去字体的一半长度 */
	margin-top: 48%;

</style>

④ 立体阴影效果设置

通过 div 的 box-shadow: 30px 30px 5px #888888 设置立体阴影效果。前 2 个值是相对图形上下偏移量，第三个值是视觉高度，越高的话阴影会越发散。

设置为 box-shadow: -30px -30px 15px #888888; 的效果，可以看到阴影角度变了，背景也发散了，border 也改成了 2px。

代码如下：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>css3演示</title> 
</head>
<body>
	<div><p>圆角</p></div>
</body>
</html>

<style> 
div 
	/* 阴影设置 */
	box-shadow: 30px 30px 5px #888888;
	/* 圆角，大小为正方形边长一半时为圆形 */
	border-radius: 20px;
	/* 文本显示在横向中间 */
	text-align: center;
	/* 设置字体 */
	font-family: 微软雅黑;
	/* 宽度和长度 */
	width: 400px;
	height: 400px;
	/* 位置：相对定位 */
	position:relative;
    top:100px;
	left:100px;
	/* 轮廓线，solid表示实心线 */
	border: 1px solid;
	/* 背景颜色 */
	background-color: rgb(167, 231, 17);


p 
	/* 文本显示在纵向中间，大概为50%减去字体的一半长度 */
	margin-top: 48%;

</style>