css实现磨砂效果
1. css的濾鏡實現：通過filter實現。
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>body {/*此處背景圖自行替換*/background: green no-repeat center center fixed;background-size: cover;min-height: 100vh;box-sizing: border-box;margin: 0;padding-top: calc(50vh - 6em);font: 150%/1.6 Baskerville, Palatino, serif;}/*** 整體居中功能；* 背景透明虛化* 溢出隱藏* 邊緣圓角化* 文字增加淡陰影*/.description{position: relative;margin: 0 auto;padding: 1em;max-width: 23em;background: hsla(0,0%,100%,.25) border-box;overflow: hidden;border-radius: .3em;box-shadow: 0 0 0 1px hsla(0,0%,100%,.3) inset,0 .5em 1em rgba(0, 0, 0, 0.6);text-shadow: 0 1px 1px hsla(0,0%,100%,.3);}/*使用濾鏡模糊邊緣*/.description::before{content: '';position: absolute;top: 0; right: 0; bottom: 0; left: 0;margin: -30px;z-index: -1;-webkit-filter: blur(20px);filter: blur(20px);}</style> </head><body><p class="description">SIF4項目原常務副總指揮/重慶京東方智慧電子系統有限公司</p> </body></html>2. 通過濾鏡背景圖片實現：在背景色上覆蓋上一層濾鏡半透明的圖片。
1.png圖片
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>body {/*此處背景圖自行替換*/background: green no-repeat center center fixed;background-size: cover;min-height: 100vh;box-sizing: border-box;margin: 0;padding-top: calc(50vh - 6em);font: 150%/1.6 Baskerville, Palatino, serif;}.description {color: #fff;position: relative;margin: 0 auto;padding: 1em; background-image: url("1.png") no-repeat;background-size:100% 100%; width: 350px;height: 254px;background: linear-gradient(90deg, #0070C6 0%, #83C5FF 100%) border-box;box-shadow: 0 3px 7px 0 rgba(35,101,145,0.75);border-radius: 10px;}.bg{width: 100%;height: 100%;position: absolute;top: 0;right: 0;bottom: 0;left: 0;}</style> </head><body><p class="description"><img src="1.png" class="bg">惺惺惜惺惺尋尋尋尋尋尋尋尋尋尋尋尋尋</p> </body></html>?
總結
- 上一篇： 多种主流报表功能分析对比
- 下一篇： matalb曲线图只有点没有线_老股民教