狠狠色丁香婷婷综合尤物/久久精品综合一区二区三区/中国有色金属学报/国产日韩欧美在线观看 - 国产一区二区三区四区五区tv

話不多說，直接進入正題。

1. 文檔布局

僅用兩行 CSS，就可以創建響應式文檔樣式布局。

.parent{
  display: grid;
  grid-template-columns: minmax(150px, 25%) 1fr;
}

2. 自定義光標

html{
  cursor:url('no.png'), auto;
}

3. 用圖像填充文本

h1{
  background-image: url('images/flower.jpg');
  background-clip: text;
  color: transparent;
  background-color: white;
}

注意：使用此技術時，請始終指定background-color，因為如果由于某種原因圖像未加載，可以將其用作回退值。

4. 為文本添加描邊效果

使用text-stroke屬性可以使文本更清晰可見，因為會向文本添加描邊筆觸或輪廓。

/* Apply a 5px wide crimson text stroke to h1 elements */

h1 {
  -webkit-text-stroke: 5px crimson;
  text-stroke: 5px crimson;
}

5. :paused 偽類

使用:paused選擇器在暫停狀態下設置媒體元素的樣式，與:paused類似的還有:playing。

/* 目前只支持 Safari 瀏覽器 */

video:paused {
  opacity: 0.6;
}

6. 強調文本

使用text-emphasis屬性將強調標記應用于文本元素。你可以指定任意字符串（包括表情符號）作為值。

h1 {
  text-emphasis: "⏰";
}

7. 首字母下沉

避免不必要的span，改用偽元素來設置內容的樣式，同樣，與:first-letter偽元素類似的還有:first-line偽元素。

h1::first-letter{
  font-size: 2rem;
  color:#ff8A00;
}

8. 變量回退值

:root {
  --orange: orange;
  --coral: coral;
}

h1 {
  color: var(--black, crimson);
}

9. 更改書寫模式

你可以使用書寫模式屬性來指定文本在網站上的布局方式，垂直或水平布局。

<h1>Cakes & Bakes</h1>

h1 {
  writing-mode: sideways-lr;
}

10. 彩虹動畫

為元素創建連續循環的顏色動畫以吸引用戶的注意力。

button{
  animation: rainbow-animation 200ms linear infinite;
}

@keyframes rainbow-animation {
  to{
    filter: hue-rotate(0deg);
  }
 from{
    filter: hue-rotate(360deg);
  }
}

11. 懸停縮放

/* 定義圖片容器的高度和寬度，以及設置圖元溢出時隱藏 */
.img-container {
  height: 250px; width: 250px; overflow: hidden;
 }

/* 讓圖片填充整個容器 */

.img-container img {
  height: 100%; width: 100%; object-fit: cover;
  transition: transform 200m ease-in;
 }

 img:hover{
  transform: scale(1.2);
 }

12. 屬性選擇器

使用屬性選擇器根據屬性選擇 HTML 元素。

<a href="">HTML</a>
<a>CSS</a>
<a href="">JavaScript</a>

/* 為每個帶href的a元素設置顏色 */

a[href] {
  color: crimson;
}

13. 剪切元素

使用clip-path屬性創建有趣的視覺效果，例如將元素剪裁為自定義的三角形或六邊形形狀。

div {
  height: 150px;
  width: 150px;
  background-color: crimson;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

14. 檢測屬性支持

使用 CSS @support rule直接在 CSS 中檢測對 CSS 功能的支持。

@supports (accent-color: #74992e) {
/* 如果瀏覽器支持，則以下代碼可以運行 */
  blockquote {
    color: crimson;
  }

}

15. CSS 嵌套

CSS 工作組一直在研究如何將嵌套添加到 CSS 中。通過嵌套，我們將能夠編寫更直觀、更有條理、更高效的 CSS。

<header class="header">
  <p class="text">Lorem ipsum, dolor</p>
</header>

/* 你可以在 Safari 瀏覽器中嘗試使用 CSS 嵌套*/

.header{

  background-color: salmon;

  .text{
    font-size: 18px;
  }

}

16. clamp 函數

clamp()函數可用于響應式和流暢的排版。

/* Syntax: clamp(minimum, preferred, maximum) */
h1{
  font-size: clamp(2.25rem,6vw,4rem);
}

17. 設置可選字段的樣式

你可以使用:optional偽類設置表單字段的樣式，例如輸入框、下拉框和文本框，這些字段上沒有必要屬性。

*:optional{
  background-color: green;
}

18. 字間距屬性

使用word-spacing屬性指定兩個單詞之間的空格長度。

p {
  word-spacing: 1.245rem;
}

19. 創建漸變陰影

創建漸變陰影以提供獨特的用戶體驗。

:root{
  --gradient: linear-gradient(to bottom right, crimson, coral);
}

div {
  height: 200px;
  width: 200px;
  background-image: var(--gradient);
  border-radius: 1rem;
  position: relative;
}

div::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--gradient);
  border-radius: inherit;
  filter: blur(25px) brightness(1.5);
  transform: translateY(15%) scale(0.95);
  z-index: -1;
}

20. 更改標題位置

使用caption-side屬性將表格標題放在表格的指定一側。

21. 創建文本列

使用column屬性為文本元素制作漂亮的列布局。

p{
  column-count: 3;
  column-gap: 4.45rem;
  column-rule: 2px dotted crimson;
}

介紹完畢。那么，這 21 個有用的 CSS 技巧你學會了嗎？