CSS3層疊樣式表是一種用于網(wǎng)頁(yè)設(shè)計(jì)的編程語(yǔ)言,它能夠?qū)崿F(xiàn)網(wǎng)頁(yè)中的各種特效和樣式。下面是CSS3中一些常用的樣式及其使用方法。
/* 文本樣式 */ /* 修改文字顏色 */ color: #fff; /* 修改文字大小 */ font-size: 16px; /* 文字加粗 */ font-weight: bold; /* 文字斜體 */ font-style: italic; /* 整體文字陰影 */ text-shadow: 1px 1px #000; /* 行高與字間距 */ line-height: 1.5; letter-spacing: 2px; /* 背景樣式 */ /* 修改背景顏色 */ background-color: #f0f; /* 修改背景圖片 */ background-image: url('example.jpg'); /* 背景重復(fù)方式 */ background-repeat: repeat; /* 背景位置 */ background-position: 50% 50%; /* 背景尺寸 */ background-size: cover; /* 邊框樣式 */ /* 邊框粗細(xì) */ border-width: 2px; /* 邊框樣式 */ border-style: solid; /* 邊框顏色 */ border-color: #000; /* 圓角 */ border-radius: 50%; /* 盒子模型 */ /* 寬度與高度 */ width: 200px; height: 100px; /* 內(nèi)邊距 */ padding: 20px; /* 外邊距 */ margin: 20px; /* 浮動(dòng) */ float: left; /* 清除浮動(dòng) */ clear: both; /* 透明度 */ opacity: 0.5; /* 過渡與動(dòng)畫 */ /* 過渡效果 */ transition: all 1s; /* 動(dòng)畫名稱 */ animation-name: example; /* 動(dòng)畫持續(xù)時(shí)間 */ animation-duration: 2s;
這些樣式只是CSS3中的一部分,還有許許多多的樣式可以使用。熟練掌握CSS3能夠讓網(wǎng)頁(yè)設(shè)計(jì)更具有個(gè)性化和專業(yè)感。但也要注意不要過度使用樣式,讓頁(yè)面過于花哨而影響用戶體驗(yàn)。
上一篇css3屬于html5
下一篇css url不加載