小轻知 2021-06-08 14:15 采纳率: 66.7%
浏览 131
已采纳

圆角边框线渐变内容区背景透明

就算最后做到背景透明但是只有最外边圆角内容区不圆角

 

  • 写回答

6条回答 默认 最新

  • CSDN专家-Tk 2021-06-08 14:58
    关注

    效果图：

    代码：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS3 border-radius边框内外圆角属性</title>
<style type="text/css">
#round2 {
	float:left;
	width:300px; height:50px;
    border: 5px solid #dedede;
    -moz-border-radius: 10px;      /* Gecko browsers */
    -webkit-border-radius: 10px;   /* Webkit browsers */
    border-radius:10px;            /* W3C syntax */
	z-index:1;
}

#round {
	float:left;
	padding:3px;
    width:294px; height:44px;
    background:white; 
	z-index:2;
}
</style> 
</head>

<body>

<div id="round2">
	<div id="round">123</div>
</div>

<br />
<br />

  


</body>

</html>

    逻辑

    应用堆叠，把这个图形看成两个板块

    一个板块是圆角图形

    一个板块是直角图形

    直角图形在圆角图形之上

     

    代码已经私聊发送给您 请查收

    麻烦点个采纳了

    本回答被题主和专家选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(5条)

报告相同问题？

问题事件

  • 已采纳回答 7月10日

悬赏问题

  • ¥15 esp8266与51单片机连接问题(标签-单片机|关键词-串口)（相关搜索：51单片机|单片机|测试代码）
  • ¥15 电力市场出清matlab yalmip kkt 双层优化问题
  • ¥30 ros小车路径规划实现不了，如何解决？(操作系统-ubuntu)
  • ¥20 matlab yalmip kkt 双层优化问题
  • ¥15 如何在3D高斯飞溅的渲染的场景中获得一个可控的旋转物体
  • ¥88 实在没有想法，需要个思路
  • ¥15 MATLAB报错输入参数太多
  • ¥15 python中合并修改日期相同的CSV文件并按照修改日期的名字命名文件
  • ¥15 有赏，i卡绘世画不出
  • ¥15 如何用stata画出文献中常见的安慰剂检验图