隨著互聯網的日益普及,個人網站越來越流行。通過自己的網站,你可以展示你的作品、分享你的想法,甚至展示你的個性。而對于一個網站的設計來說,css無疑是最重要的一部分。以下是幾個css的技巧,用來為你的個人網站增添風格和獨特性。
/* 1.使用自定義字體 */ @font-face { font-family: 'myfont'; /*自定義字體名字*/ src: url('myfont.ttf'); /*自定義字體文件的路徑*/ } body { font-family: 'myfont', sans-serif; /*應用自定義字體*/ } /* 2.使用漸變背景 */ body { background-color: #FFF; /*如果瀏覽器不支持漸變,將會顯示這個顏色*/ background-image: linear-gradient(to bottom right, #F00, #00F); /*使用漸變背景*/ } /* 3.使用展示圖片的動畫效果 */ img { transition: transform 0.5s ease; /*過渡效果*/ } img:hover { transform: rotate(360deg); /*鼠標懸浮時旋轉圖片*/ } /* 4.使用文本框陰影效果 */ input[type="text"] { box-shadow: 2px 2px 2px grey; /*陰影效果*/ } /* 5.使用本地圖片作為背景 */ #header { background-image: url('header.jpg'); /*背景圖片的路徑*/ background-size: cover; /*使圖片適應容器*/ }
通過以上的技巧,你可以為你的個人網站增添更多的驚喜和獨特性。當然,css的使用還有很多細節需要注意,例如多瀏覽器兼容性、性能優化等。不過學會一些技巧,也會有助于你更加深入地了解css的用法。
上一篇用css制作動圖
下一篇用css寫出微信界面