背景颜色设置成透明实例教程_动视

背景颜色设置成透明实例教程

2020-11-27 15:29:47 责编:小采

1.小三角，通过给一个div设置足够大的边框，让它的上边框，右边框，左边框，的背景颜色设置成透明的，来实现，如下：

<!DOCTYPE html>
<html>

	<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
	#demo {
	width: 0;
	height: 0;
	/*边框的宽20px*/
	border-width: 20px;
	/*边框样式,实线*/
	border-style: solid;
	/*边框颜色*/
	border-color: transparent transparent red transparent;
	}
	</style>
	</head>

	<body>
	<!--小三角，transparent透明的，-->
	
	<div id="demo">
	
	</div>
	</body>

</html>

　　2.a标签的移动端问题：

　　 1》当再点击a标签的时候，它会有默认的背景颜色，解决办法

　　　　 1 -webkit-tap-highlight-color:transparent;

　　　2》当点击时可能会出现下划线，解决方法

1 text-decoration: none; //或者2 3 border: none；//或者4 5 outline:none;

　　　　3>当鼠标放上去时显出下划线，解决办法；

a:hover{
 
text-decoration:none;
}

　　a标签是一个行内标签，如果要设置它的宽高或多个样式可通过display：block;将其变为块级标签。

下载本文

显示全文

全部频道