用css怎么設(shè)置div滾動(dòng)條的樣式，可改變大小的

在css設(shè)置可改變大小的div滾動(dòng)條樣式方法：

專注于為中小企業(yè)提供成都網(wǎng)站建設(shè)、做網(wǎng)站服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)旅順口免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了數(shù)千家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

1.首先新建html文檔，進(jìn)入代碼書寫界面。

2.在/head和body的里面寫入代碼，在div里面寫入想要輸入的內(nèi)容/div。

3.書寫外層軌道css代碼。body::-webkit-scrollbar { width:20px; height:2px; background:#ccc; border-radius:10px;/*外層軌道*/}

這里主要是設(shè)置外層軌道的形狀和顏色。

4.書寫內(nèi)層軌道css代碼。body::-webkit-scrollbar-thumb{ display:block; width:6px; margin:0 auto; border-radius: 10px; background:red;/*內(nèi)層軌道*/}

這里主要是設(shè)置內(nèi)層軌道的形狀和顏色。

5.代碼工作做完后，就可以查看效果，效果如下紅框所示，滾動(dòng)條設(shè)置完成。

CSS3 流動(dòng)邊框（仿王者榮耀等待效果）的三種實(shí)現(xiàn)方式

!DOCTYPE html

html

head

meta charset="utf8"

style

:root {

--border-anim-size: 10em;

--border-anim-width: calc(var(--border-anim-size) / 20);

--border-anim-width-double: calc(var(--border-anim-width)*2);

--border-anim-duration: 5s;

--border-anim-border-color: gray;

--border-anim-hover-color: LightCoral;

}

body {

display: flex;

}

.border-anim {

width: var(--border-anim-size);

height: var(--border-anim-size);

position: relative;

border: 1px solid? var(--border-anim-border-color);

}

.border-anim::before, .border-anim::after {

content: '';

position: absolute;

border: var(--border-anim-width) solid var(--border-anim-border-color);

/* 讓邊框在內(nèi)容區(qū)域內(nèi)繪制 */

box-sizing: border-box;

transition: background-color 1s;

}

.border-anim::before {

animation: anim-border-run calc(var(--border-anim-duration) * 2) linear infinite;

}

.border-anim::after {

animation: anim-border-run calc(var(--border-anim-duration) * 2) calc(var(--border-anim-duration) / -1) linear infinite;

}

.border-anim:hover::before, .border-anim:hover::after {

background-color: var(--border-anim-hover-color);

}

.border-anim-content {

width: calc(100% - var(--border-anim-width-double));

height: calc(100% - var(--border-anim-width-double));

margin: var(--border-anim-width);

border: 1px solid var(--border-anim-border-color);

}

@keyframes anim-border-run {

/* 這里將動(dòng)畫分成了4步；也可以改為2步，這時(shí)before和after用的就要是兩套keyframes了 */

from, to {

width: var(--border-anim-width-double);

height: 100%;

top: 0;

left: 0;

}

25% {

width: 100%;

height: var(--border-anim-width-double);

top: calc(100% - var(--border-anim-width-double));

left: 0;

}

50% {

width: var(--border-anim-width-double);

height: 100%;

top: 0;

left: calc(100% - var(--border-anim-width-double));

}

75% {

width: 100%;

height: var(--border-anim-width-double);

top: 0%;

left: 0%;

}

/* 需要設(shè)置臨界效果，否則會(huì)漸變 */

from, to, 24.9% {

border-left-color: var(--border-anim-border-color);

border-top-color: transparent;

border-right-color: transparent;

border-bottom-color: var(--border-anim-border-color);

}

25%, 49.9% {

border-left-color: transparent;

border-top-color: transparent;

border-right-color: var(--border-anim-border-color);

border-bottom-color: var(--border-anim-border-color);

}

50%, 74.9% {

border-left-color: transparent;

border-top-color: var(--border-anim-border-color);

border-right-color: var(--border-anim-border-color);

border-bottom-color: transparent;

}

75%, 99.9% {

border-left-color: var(--border-anim-border-color);

border-top-color: var(--border-anim-border-color);

border-right-color: transparent;

border-bottom-color: transparent;

}

}

/style

style

.border-anim2 {

width: var(--border-anim-size);

height: var(--border-anim-size);

position: relative;

border: 1px solid var(--border-anim-border-color);

}

.border-anim2-edge {

position: absolute;

/* 必須把其他邊框置0，否則有默認(rèn)值存在 */

border: 0px solid var(--border-anim-border-color);

box-sizing: border-box;

}

/*

注意：CSS中不能前向選擇，而只能后向選擇！

因?yàn)槿绻鸆SS支持了父選擇器，那就必須要頁面所有子元素加載完畢才能渲染HTML文檔，

因?yàn)樗^“父選擇器”，就是后代元素影響祖先元素，如果后代元素還沒加載處理，如何影響祖先元素的樣式？

于是，網(wǎng)頁渲染呈現(xiàn)速度就會(huì)大大減慢，瀏覽器會(huì)出現(xiàn)長(zhǎng)時(shí)間的白板。

*/

/* 波浪號(hào)和加號(hào)都是選擇其后的元素，區(qū)別是加號(hào)只取一個(gè)，波浪取所有

.border-anim-content:hover ~ .border-anim2-edge { */

.border-anim2:hover .border-anim2-edge {

background-color: var(--border-anim-hover-color);

}

.border-anim2-left {

width: var(--border-anim-width-double);

height: 100%;

left: 0;

border-left-width: var(--border-anim-width);

animation: anim2-border-run-left var(--border-anim-duration) calc(var(--border-anim-duration) / -2) linear infinite;

}

.border-anim2-top {

height: var(--border-anim-width-double);

width: 100%;

top: 0;

border-top-width: var(--border-anim-width);

animation: anim2-border-run-top var(--border-anim-duration) linear infinite;

}

.border-anim2-right {

width: var(--border-anim-width-double);

height: 100%;

right: 0;

border-right-width: var(--border-anim-width);

animation: anim2-border-run-right var(--border-anim-duration) calc(var(--border-anim-duration) / -2) linear infinite;

}

.border-anim2-bottom {

height: var(--border-anim-width-double);

width: 100%;

bottom: 0;

border-bottom-width: var(--border-anim-width);

animation: anim2-border-run-bottom var(--border-anim-duration) linear infinite;

}

@keyframes anim2-border-run-left {

from, to {

height: 0;

}

50% {

height: 100%;

}

from, to, 49.9% {

top: 0;

bottom: auto;

}

50%, 99.9% {

top: auto;

bottom: 0;

}

}

@keyframes anim2-border-run-top {

from, to {

width: 0;

}

50% {

width: 100%;

}

from, to, 49.9% {

left: auto;

right: 0;

}

50%, 99.9% {

left: 0;

right: auto;

}

}

@keyframes anim2-border-run-right {

from, to {

height: 0;

}

50% {

height: 100%;

}

from, to, 49.9% {

top: auto;

bottom: 0;

}

50%, 99.9% {

top: 0;

bottom: auto;

}

}

@keyframes anim2-border-run-bottom {

from, to {

width: 0;

}

50% {

width: 100%;

}

from, to, 49.9% {

left: 0;

right: auto;

}

50%, 99.9% {

left: auto;

right: 0;

}

}

/style

style

.border-anim3 {

width: var(--border-anim-size);

height: var(--border-anim-size);

position: relative;

border: 1px solid var(--border-anim-border-color);

box-sizing: border-box;

}

.border-anim3::before, .border-anim3::after {

content: '';

position: absolute;

width: 100%;

height: 100%;

top: 0;

left: 0;

}

.border-anim3::before {

box-shadow: 0 0 0 var(--border-anim-width) var(--border-anim-border-color) inset;

animation: anim3-border-run calc(var(--border-anim-duration) * 2) calc(var(--border-anim-duration) / -1) linear infinite;

}

.border-anim3::after {

box-shadow: 0 0 0 var(--border-anim-width) var(--border-anim-border-color) inset;

animation: anim3-border-run calc(var(--border-anim-duration) * 2) linear infinite;

}

.border-anim3:hover::before, .border-anim3:hover::after {

/* 如果只在hover的時(shí)候設(shè)置transition，那么進(jìn)入有效，但是退出無效(即退出時(shí)不會(huì)有緩動(dòng)) */

transition: background-color 1s;

background-color: var(--border-anim-hover-color);

}

@keyframes anim3-border-run {

/*

clip通過對(duì)元素進(jìn)行剪切來控制元素的可顯示區(qū)域(clip的區(qū)域顯示，其他隱藏)

clip屬性只能在元素設(shè)置了“position:absolute”或者“position:fixed”屬性起作用

shape函數(shù)聲明：rect(top right bottom left)

rect()和top和bottom指定偏移量是從元素盒子頂部邊緣算起；left和right指定的偏移量是從元素盒子左邊邊緣算起（包括邊框）。

如果right和bottom設(shè)置為auto時(shí)，他們就相當(dāng)于元素的寬度（這個(gè)寬度包括元素的border、padding和width），或者簡(jiǎn)單的理解為100%

注意：1.值不能設(shè)置為百分比。 2.在動(dòng)畫設(shè)置過程里不能使用auto，使用auto沒有動(dòng)畫效果（因此建議使用SCSS或者LESS之類的預(yù)處理器）

*/

/*

clip動(dòng)畫有3種方案，但是都有點(diǎn)小瑕疵（在線條粗的時(shí)候明顯，線條細(xì)的情況下完全看不出來）

(1)使用如下的1和9作為邊界，當(dāng)拐彎的時(shí)候，尾部多余的邊界會(huì)跟著動(dòng)

(2)將下面的1和9替換為0和10，當(dāng)拐彎的時(shí)候，線條寬度會(huì)變?yōu)?

(3)在每個(gè)狀態(tài)后面一步立即重置它，但是會(huì)出現(xiàn)抖動(dòng)

*/

from, to {

clip: rect(0, 1em, 10em, 0);

}

1% {

clip: rect(1em, 1em, 10em, 0);

}

25% {

clip: rect(9em, 10em, 10em, 0);

}

25.1% {

clip: rect(9em, 10em, 10em, 1em);

}

50% {

clip: rect(0, 10em, 10em, 9em);

}

50.1% {

clip: rect(0, 10em, 9em, 9em);

}

75% {

clip: rect(0, 10em, 1em, 0);

}

75.1% {

clip: rect(0, 9em, 1em, 0);

}

}

/style

/head

body

section

h1(1)通過兩矩形的移動(dòng)來制作動(dòng)畫/h1

div class="border-anim"

div class="border-anim-content"/div

/div

/section

section

h1(2)通過四個(gè)邊框的長(zhǎng)度來控制動(dòng)畫/h1

div class="border-anim2"

div class="border-anim-content"/div

div class="border-anim2-edge border-anim2-left"/div

div class="border-anim2-edge border-anim2-top"/div

div class="border-anim2-edge border-anim2-right"/div

div class="border-anim2-edge border-anim2-bottom"/div

/div

/section

section

h1(3)通過clip的裁剪來顯示動(dòng)畫/h1

div class="border-anim3"

div class="border-anim-content"/div

/div

section

/body

/html

對(duì)web開發(fā)技術(shù)感興趣的同學(xué)，歡迎私信我加群，不管你是小白還是大牛我都?xì)g迎，還有大牛整理的一套高效率學(xué)習(xí)路線和教程與您免費(fèi)分享，同時(shí)每天更新視頻資料。

最后，祝大家早日學(xué)有所成，拿到滿意offer，快速升職加薪，走上人生巔峰

在CSS樣式中有關(guān) float 浮動(dòng)嵌套 問題

浮動(dòng)元素可以相互嵌套，嵌套規(guī)律與流動(dòng)元素的嵌套相同。浮動(dòng)的包含元素（父元素）總會(huì)自動(dòng)調(diào)整自身的高度和寬度以實(shí)現(xiàn)對(duì)浮動(dòng)元素的包含。

我們來看一個(gè)例子：

瀏覽器效果圖：

這時(shí)會(huì)發(fā)現(xiàn)父元素會(huì)自動(dòng)調(diào)整自身的大小來包含子元素。

如果包含元素定義了高度和寬度則他不會(huì)隨子元素的大小而自動(dòng)調(diào)整自身顯示區(qū)域來適應(yīng)子元素的顯示。注意，在IE6及更低版本瀏覽器中包含框仍然能夠自動(dòng)調(diào)整自身大小來適應(yīng)子元素的顯示大小，不過在IE7版本中微軟糾正了這個(gè)不符合標(biāo)準(zhǔn)的顯示方法。如下

示例：

瀏覽器效果圖：

默認(rèn)狀態(tài)下溢出不隱藏，我們可以添加 樣式 overflow:hidden; 隱藏多余的部分或overflow: scroll; 多余部分顯示滾動(dòng)條。

如果把浮動(dòng)元素嵌入到流動(dòng)元素之內(nèi)，則父元素不能夠自適應(yīng)子元素的高度，

如下示例：

瀏覽器效果圖：

在上圖中可以看到包含元素div并，沒用顯示。原因就是包含元素沒有適應(yīng)子元素的高度，而是根據(jù)自身定義的屬性以獨(dú)立的形式顯示（父元素沒有被撐開，僅收縮成一條直線顯示）。所以，在應(yīng)用混合嵌套式，要預(yù)測(cè)到浮動(dòng)與流動(dòng)混合布局時(shí)會(huì)出現(xiàn)的各種怪現(xiàn)象，并積極做好兼容處理。

解決方法：可以在包含元素內(nèi)的最后一行添加一個(gè)清除元素，強(qiáng)制撐開包含元素，使其包含浮動(dòng)元素。

示例如下：

瀏覽器效果圖：

本文章參考書籍：HTML5＋CSS3＋JavaScript從入門到精通（標(biāo)準(zhǔn)版）未來科技　編著

CSS怎么改變表單下拉框箭頭和滾動(dòng)條樣式

CSS改變流動(dòng)條的樣式，代碼如下：

scrollbar-face-color:#FEFAF1;?(立體滾動(dòng)條凸出部分的顏色)?

scrollbar-highlight-color:#FEFAF1;?(滾動(dòng)條空白部分的顏色)?

scrollbar-shadow-color:#FEFAF1;?(立體滾動(dòng)條陰影的顏色)?

scrollbar-arrow-color:#E6C3B9;(上下按鈕上三角箭頭的顏色)?

scrollbar-base-color:#FEFAF1;?(滾動(dòng)條的基本顏色)?

scrollbar-darkshadow-color:#E6C3B9;?(立體滾動(dòng)條強(qiáng)陰影的顏色)?

scrollbar-3dlight-color:#E6C3B9;(滾動(dòng)條亮邊的顏色)?

scrollbar-track-color:#FEFAF1;}?(滾動(dòng)條的背景顏色)

CSS（層疊樣式表）級(jí)聯(lián)樣式表是一種用來表現(xiàn)HTML（標(biāo)準(zhǔn)通用標(biāo)記語言的一個(gè)應(yīng)用）或XML（標(biāo)準(zhǔn)通用標(biāo)記語言的一個(gè)子集）等文件樣式的計(jì)算機(jī)語言。