當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

048_CSS3用户界面

發布時間：2025/4/17 CSS 91 豆豆

生活随笔收集整理的這篇文章主要介紹了 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用户界面的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

用户界面