成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

立即前往

首頁(yè)/文章專欄/css實(shí)現(xiàn)的一些視覺(jué)效果

css實(shí)現(xiàn)的一些視覺(jué)效果

luffyZh 發(fā)布于2019-08-29 12:37 / 3294人閱讀

摘要：鄰邊投影雙側(cè)投影用兩塊投影每邊各一塊來(lái)實(shí)現(xiàn)不規(guī)則投影解決辦法是使用濾鏡效果，。濾鏡，它會(huì)給圖片增加一種降飽和度的橙黃色染色效果。實(shí)現(xiàn)方式毛玻璃效果折角效果折角的解決方案增加一個(gè)暗色的三角形來(lái)實(shí)現(xiàn)翻折效果。

投影

1.單側(cè)投影
思路是box-shadow 的第四個(gè)長(zhǎng)度參數(shù)。它排在模糊半徑參數(shù)之后，稱作擴(kuò)張半徑。這個(gè)參數(shù)會(huì)根據(jù)你指定的值去擴(kuò)大或當(dāng)指定負(fù)值時(shí)，縮小投影的尺寸。例如，一個(gè)-5px 的擴(kuò)張半徑會(huì)把投影的寬度和高度各減少10px（即每邊各5px）。

box-shadow: 0 5px 4px -4px black;

2.鄰邊投影

box-shadow: 3px 3px 6px -3px black;

3.雙側(cè)投影

用兩塊投影（每邊各一塊）來(lái)實(shí)現(xiàn)

box-shadow: 5px 0 5px -5px black,
            -5px 0 5px -5px black;

不規(guī)則投影

解決辦法是使用濾鏡效果，filter。值有很多，比如blur()、grayscale() 以及drop-shadow()等。

實(shí)現(xiàn)不規(guī)則投影使用的是drop-shadow

filter: drop-shadow(2px 2px 10px rgba(0,0,0,.5));

注：drop-shadow會(huì)給任何非透明的部分打上投影，包括文本。如果文本設(shè)置了text-shadow，就是投影的投影。

染色效果

方案一：
為了解決給圖片加一層統(tǒng)一的渲染風(fēng)格，使用filter濾鏡，并且需要將一些濾鏡的值疊加使用。

sepia濾鏡，它會(huì)給圖片增加一種降飽和度的橙黃色染色效果。
saturate濾鏡，給每個(gè)像素提升飽和度
hue-rotate濾鏡，把每個(gè)像素的色相以指定的度數(shù)進(jìn)行偏移

filter: sepia(1) saturate(4) hue-rotate(295deg);

原圖：

方案二：
基于混合模式的方案。mix-blendmode可以為整個(gè)元素設(shè)置混合模式。background-blend-mode 可以為每層背景多帶帶指定混合模式。

實(shí)現(xiàn)方式：

a {
    background: hsl(335, 100%, 50%);
}
img {
    mix-blend-mode: luminosity;
}

毛玻璃效果


    
      
        "The only way to get rid of a temptation[...]"

.bg {
  width: 500px;
  height: 300px;
  background: url("dog.jpg");
  background-size: cover;
}

main {
  position: relative;
  background: hsla(0, 0%, 100%, .3);
  overflow: hidden;
}

main::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  filter: blur(20px);
  margin: -30px;
}

折角效果

45°折角的解決方案
增加一個(gè)暗色的三角形來(lái)實(shí)現(xiàn)翻折效果。實(shí)現(xiàn)方法是增加另一層漸變來(lái)生成這個(gè)三角形并將其定位在右上角，這樣就可以通過(guò)background-size 來(lái)控制折角的大小。

div {
    background: #58a; /* 回退樣式 */
    background:
    linear-gradient(to left bottom, transparent 50%, rgba(0,0,0,.4) 0) no-repeat 100% 0 / 2em 2em,
    linear-gradient(-135deg, transparent 1.5em, #58a 0);
}