css：三角&使用者介面（三角形效果、滑鼠樣式、輸入框與文字域的優化）
阿新 • • 發佈：2020-07-06
1、三角形的實現原理
（1）在定義一個塊級元素div的時候，不給它定義寬和高：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.box{
width: 0;
height: 0;
border-top: 10px solid red;
border
效果：
（2）實現三角形效果：只保留上邊框，其他邊框設定為透明色：
<style> .box{ width: 0; height: 0; border-top: 10px solid red; border-bottom: 10px solid transparent; border-left: 10px solid transparent; border-right: 10px solid transparent; }</style>
三角形效果：
2、網站三角效果
本質上是一個大盒子和一個三角形拼接而成，父元素用相對定位，子元素用絕對定位，這樣的話子元素才能在父元素內自由移動位置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.bigbox{
position: relative;
width: 230px;
height: 230px;
background-color: aqua;
}
.bigbox span{
position: absolute;
width: 0;
height: 0;
top: -20px;
right: 20px;
border-top: 10px solid transparent;
border-bottom: 10px solid aqua;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
//解決相容性問題
line-height: 0;
font-size: 0;
}
</style>
</head>
<body>
<div class="bigbox">
<span></span>
</div>
</body>
</html>
3、滑鼠樣式
（1）不對滑鼠樣式進行任何操作點選段落：
（2）手
<p style="cursor: pointer;">你好</p>
（3）移動
<p style="cursor: move;">你好</p>
<input style="outline: none;" type="text" />
（4）禁止
<p style="cursor: not-allowed;">你好</p>
4、使用者介面樣式
（1）去除表單的輪廓線：
取消前：
取消後：
<input style="outline: none;" type="text" />
（2）去除文字域可以拖動改變大小的效果：
<textarea cols="20" rows="23" style="resize: none;"></textarea>