卡卡網(wǎng)

有沒(méi)有一種直接的 CSS 方法可以用這樣的方式使元素的邊框半透明？

border-opacity: 0.7;

如果沒(méi)有，如何在不使用圖像的情況下做到這一點(diǎn)？

這個(gè)想法很好，但是目前的CSS、CSS3里沒(méi)有這個(gè)屬性，我們不能用CSS直接這樣設(shè)置邊框的透明度。但是，我們可以用CSS來(lái)實(shí)現(xiàn)這個(gè)效果，代碼也很簡(jiǎn)單。

示例

demodownload

HTML

<div>
    <div class="demo"></div>
    這可能是因?yàn)樗芡纯?，他被認(rèn)為身體很好，但隨后他遭受了麻煩和巨大的痛苦。因?yàn)楫?dāng)我說(shuō)到底，除了他們中的任何一個(gè)人都能幫忙之外，什么都不干。這就像頭痛、頭痛、心臟病發(fā)作或心臟病發(fā)作。除非他們被殺，否則他們不會(huì)被扔掉；他們是那些離開工作崗位的人的錯(cuò)，他們會(huì)失去靈魂。
</div>

CSS

.demo {
    display: block;
    width: 100px; height: 100px;
    border: 10px solid rgba(255, 0, 0, 0.8);
    position: absolute;
}

代碼解釋

主要實(shí)現(xiàn)代碼：border: 10px solid rgba(255, 0, 0, 0.8);，CSS3 支持rgba(...)使用alpha值指定邊框顏色和透明度的語(yǔ)法。它適用于 Safari 和 Chrome（可能適用于所有 webkit 瀏覽器），它適用于火狐，在 IE11 也有效。

rgba()

rgba()功能符號(hào)根據(jù)其紅色、綠色和藍(lán)色分量表示顏色。一個(gè)可選的 alpha 分量表示顏色的透明度。

句法

rgba(255, 255, 255) /* 白色 */
rgba(255, 255, 255, 0.5) /* 透明度為50%的白色 */
rgba(255 255 255 / 0.5); /* CSS顏色4個(gè)空格分開的值 */
rgba(255 255 255 / 50%); /* CSS顏色按百分比分隔的4個(gè)值 */

值

▲功能符號(hào)：rgba(R, G, B[, A])

R（紅色）、G（綠色）和B（藍(lán)色）可以是<number>s 或<percentage>s，其中數(shù)字255對(duì)應(yīng)于100%。A(alpha) 可以是介于0和1的<number>或 a <percentage>，其中數(shù)字1對(duì)應(yīng)于100%（完全不透明度）。

▲功能符號(hào)：rgba(R G B[ / A])

CSS顏色級(jí)別4在功能符號(hào)中增加了對(duì)空格分隔值的支持。

演示

相關(guān)文章

• CSS隱藏元素的10種方法之：color Alpha 透明度
• CSS隱藏元素的10種方法之：opacity和filter: opacity()
• CSS隱藏元素的10種方法之：縮小尺寸
• CSS隱藏元素的10種方法之：使用::after偽元素
• CSS隱藏元素的10種方法之：使用position屬性
• CSS隱藏元素的10種方法之：使用display
• CSS隱藏元素的10種方法之：使用visibility
• CSS隱藏元素的10種方法之：使用clip-path
• CSS隱藏元素的10種方法之：使用transform
• 如何使用CSS在鼠標(biāo)懸停時(shí)縮放圖像

標(biāo)簽: css  透明度  opacity