1.顯示與隱藏
- 盒子顯示:display:block;
- 盒子隱藏:
? ? display:none:隱藏該元素并且該元素所占的空間也不存在了。
? ? visibility:hidden:隱藏該元素但是該元素所占的內存空間還存在，即“隱身效果”。
2.圓角邊框
在CSS2中添加圓角，我們不得不使用背景圖像，在 CSS3中使用border-radius屬性將很容易創建圓角。 border-radius屬性是一個簡寫屬性，用于設置四個border-radius屬性。
語法:
border-radius:top-left top-right bottom-left bottom-right;
可能的值:
- 一個值:設置四個角的圓角大小;
- 兩個值:設置左上和右下 右上和左下的圓角大小;
- 三個值:設置左上、右上和左下、右下的圓角大小;
- 四個值:設置左上、右上、右下、左下的圓角大小。
?border-radius的值可以是具體的數值也可以是百分比。
實例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1{width: 300px;height: 300px;background-color: blueviolet;border-radius: 50px ;}.box2{width: 300px;height: 300px;background-color: rgb(57, 203, 214);border-radius: 50% ;}</style>
</head>
<body><div class="box1"></div><div class="box2"></div>
</body>
</html>?
3.Overflow屬性
overflow屬性規定當內容溢出標簽框時的顯示方式，包括水平方向和垂直方向。
?overflow-x只包括水平方向。
?overflow-y只包括垂直方向。
可能的值:
- visible 默認值。內容不會被修剪，會呈現在標簽框之外。
- hidden 內容會被修剪，并且其余內容是不可見的。
- scroll 內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容。
- auto 如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容。
注意：overflow屬性僅適用于具有指定高度的塊元素。
4.透明度屬性(opacity,rgba())，透明度兼容
實現透明的CSS方法通常有以下3種方式，以下是不透明度都為80%的寫法。
?CSS3的opacity:x，x的取值從0到1，如opacity:0.8;
CSS3 的rgba(red, green,blue,alpha)，alpha的取值從0到1，如rgba(255,255,255,0.8) ；
IE專屬濾鏡 filter:Alpha(opacity=x)，x的取值從0到100，如 filter:Alpha(opacity=80)。
1. opacity
1、兼容性:IE6、7 8不支持，IE9及以上版本和標準瀏覽器都支持。
2、使用說明:設置 opacity元素的所有后代元素會隨著一起具有透明性，一般用于調整圖片或者模塊的整不透明度。
2. rgba()
1、兼容性:IE6、7、8不支持，IE9及以上版本和標準瀏覽器都支持。
2、使用說明:設置顏色的不透明度，一般用于調整 background-color、color等的不透明度。 IE6 和部分 IE7 內核的瀏覽器 ( 如 QQ 瀏覽器)會讀懂 rgba，解析后顏色為透明，其實應該是 null那么使用opacity實現背景透明，文字不透明是可取的。
3.IE 專屬濾鏡filter:Alpha(opacity=x)
1、兼容性:僅支持IE6、7、8、9，在IE10 版本被廢除。
2、使用說明:IE 瀏覽器專屬，問題多，如下:
255,0.8); 在IE6、7中，需要激活IE 的 haslayout 屬性(如:*zoom:1 或者 *overflow:hidden)，讓它讀懂 filter:Al-
pha
0)。
在IE6、7、8中，設置了filter:Alpha的元素，父元素設置position:static(默認屬性)，其子元素為相對定位可讓子元素不透明。
)
