轻松掌握css3阴影、倒影、渐变小技巧-tutorial css-php.cn

Rumah

hujung hadapan web

tutorial css

轻松掌握css3阴影、倒影、渐变小技巧

高洛峰

Mar 04, 2017 am 10:11 AM

下面小编就为大家带来一篇5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

做：轻松掌握css3阴影、倒影、渐变小技巧

二、先是建立两个文本不做处理运行如图 轻松掌握css3阴影、倒影、渐变小技巧

三、给第一个p字体加上阴影

text-shadow: 5px 5px 10px red;

text-shadow: 5px 5px 5px red,5px -5px 10px yellow;

box-shadow:用法与text-shadow类似，只不过它是对盒子，比如p

text-shadow:[颜色(Color)  x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)],[颜色(color) x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)]...前两个值可以是负数,第三个不能使负数,可以是0(无效果)

轻松掌握css3阴影、倒影、渐变小技巧

四、给第一个p加上倒影

-webkit-box-reflect:below 10px ;

方向 (above上 below下左右left right) 间距。

注意：倒影不占文档流的空间,层级高于文档流倒影是针对标签(宽高)进行的轻松掌握css3阴影、倒影、渐变小技巧

五、加上渐变

background-image: -webkit-linear-gradient(left, red 0%, yellow 50% );

第一个百分数是从0%到这个百分数全是这种颜色,最后一个百分比是从这个百分数到100%全是这种颜色,中间如果不同百分数就是渐变,一样就是分界线。

轻松掌握css3阴影、倒影、渐变小技巧

六、所有代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS3</title>
        <style type="text/css">
            p{    
                font-size: 30px;    
                width: 300px;    
                height: 100px;    
                background-image: -webkit-linear-gradient(left, red 0%, yellow 50% );    
                /*渐变*/    
                color: blue;    
                -webkit-box-reflect:below 10px ;    
                /*倒影*/    
                text-shadow: 5px 5px 10px red;    
                /*阴影*/    
            }    
            span{    
                background: aqua;    
            }    

</style>
    </head>
    <body>
        <p>
            <p>我会翻跟斗！！哈哈哈</p>
        </p>
        <span>
            倒影不能把握的位置给占了！倒影不能把握的位置给占了！    
            倒影不能把握的位置给占了！倒影不能把握的位置给占了！    
        </span>
    </body>
</html>

以上这篇5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持PHP中文网。

更多轻松掌握css3阴影、倒影、渐变小技巧相关文章请关注PHP中文网！

Kenyataan

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel Berkaitan

Begitu banyak pautan warnaApr 13, 2025 am 11:36 AM

Di sana ' s telah menjalankan alat, artikel, dan sumber tentang warna akhir -akhir ini. Tolong izinkan saya menutup beberapa tab dengan membulatkannya di sini untuk keseronokan anda.

Bagaimana margin automatik berfungsi di flexboxApr 13, 2025 am 11:35 AM

Robin telah menutupi ini sebelum ini, tetapi saya telah mendengar kekeliruan mengenainya dalam beberapa minggu yang lalu dan melihat orang lain menikam menerangkannya, dan saya mahu

Melangkah Rainbow Garis bawahApr 13, 2025 am 11:27 AM

Saya sangat suka reka bentuk tapak sandwic. Di antara banyak ciri yang indah ialah tajuk utama ini dengan garis bawah Rainbow yang bergerak ketika anda menatal. Ia ' s tidak

Tahun Baru, pekerjaan baru? Let ' s membuat resume berkuasa grid!Apr 13, 2025 am 11:26 AM

Banyak reka bentuk resume yang popular membuat sebahagian besar ruang halaman yang tersedia dengan meletakkan bahagian dalam bentuk grid. Mari kita gunakan grid CSS untuk membuat susun atur yang

Salah satu cara untuk memecahkan pengguna dari kebiasaan tambah nilai terlalu banyakApr 13, 2025 am 11:25 AM

Tambah nilai halaman adalah satu perkara. Kadang -kadang kita menyegarkan halaman apabila kita fikir ia tidak bertindak balas, atau percaya bahawa kandungan baru tersedia. Kadang -kadang kita hanya marah

Reka bentuk yang didorong oleh domain dengan ReactApr 13, 2025 am 11:22 AM

Terdapat panduan yang sangat sedikit tentang cara mengatur aplikasi front-end di dunia React. (Hanya gerakkan fail sehingga ia "terasa betul," lol). Kebenaran

Mengesan pengguna yang tidak aktifApr 13, 2025 am 11:08 AM

Kebanyakan masa anda tidak benar -benar peduli sama ada pengguna secara aktif terlibat atau tidak aktif sementara pada aplikasi anda. Tidak aktif, makna, mungkin mereka

Wufoo ZapierApr 13, 2025 am 11:02 AM

Wufoo sentiasa hebat dengan integrasi. Mereka mempunyai integrasi dengan aplikasi tertentu, seperti Monitor Kempen, MailChimp, dan TypeKit, tetapi mereka juga

See all articles