048_CSS3用户界面
生活随笔
收集整理的這篇文章主要介紹了
048_CSS3用户界面
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1. 在CSS3中, 新的用戶界面特性包括重設元素尺寸、盒尺寸以及輪廓偏移等。
2. 下面的表格列出了所有的轉換屬性
3.?resize屬性
3.1. resize屬性規定是否可由用戶調整元素的尺寸。
3.2. 如果希望此屬性生效, 需要設置元素的overflow屬性, 值可以是auto、hidden或scroll。
3.3. 默認值
3.4. 可能值
3.5. 例子
3.5.1. 代碼
<!DOCTYPE html> <html><head><title>CSS3 用戶界面-resize屬性</title><meta charset="utf-8" /><style type="text/css">div {border: 2px solid;padding: 10px 40px; width: 300px;resize: both;overflow: auto;}</style></head><body><div>resize屬性規定是否可由用戶調整元素尺寸。</div></body> </html>3.5.2. 效果圖
4. 盒尺寸
4.1. box-sizing屬性允許您以特定的方式定義匹配某個區域的特定元素。
4.2. 語法
box-sizing: content-box|border-box|inherit;4.3. 默認值
4.4. 可能值
4.5. 例子
4.5.1. 代碼
<!DOCTYPE html> <html><head><title>盒尺寸</title><meta charset="utf-8" /><style type="text/css">div.container {width: 30em;border: 1em solid;float: left;}div.box {width: 50%;border: 1em solid red;float: left;/*沒有這個屬性一行容納不了2個盒子*/box-sizing: border-box; }</style></head><body><div class="container"><div class="box">這個 div 占據左半部分。</div><div class="box">這個 div 占據右半部分。</div></div></body> </html>4.5.2. 效果圖
5. 輪廓偏移
5.1. outline-offset 屬性對輪廓進行偏移, 并在邊框邊緣進行繪制。
5.2. 輪廓在兩方面與邊框不同:
- 輪廓不占用空間
- 輪廓可能是非矩形
5.3. 語法
outline-offset: length|inherit;5.4. 默認值
5.5. 可能值
5.6. 例子
5.6.1. 代碼
<!DOCTYPE html> <html><head><title>輪廓偏移</title><meta charset="utf-8" /><style type="text/css">div {margin: 20px;width: 150px; padding: 10px;height: 70px;border: 2px solid black;outline: 2px solid red;outline-offset: 15px;} </style></head><body><div>這個div在邊框邊緣之外15像素處有一個輪廓。</div></body> </html>5.6.2. 效果圖
總結
以上是生活随笔為你收集整理的048_CSS3用户界面的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 047_CSS3多列
- 下一篇： 017_CSS长度单位