css3应用-CSDN博客

这篇博客详细介绍了CSS3中的几个重要特性，包括如何定义和使用自定义字体，设置文字和盒子的阴影效果，创建不同类型的圆角边框，以及实现平滑的过渡效果。此外，还深入探讨了线性和径向渐变的用法，为网页设计提供了丰富的视觉效果和交互体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

自定义字体

/*引用外部字体*/
           @font-face {
               font-family:"zhou";
               src: url(fonts/STLITI.ttf)/*用src来引用*/
           }
           .box{
               font-size: 50px;
               font-family:zhou ;
           }

文字阴影

{
box-shadow: darkgrey 0px 0px 0px 200px inset ;

                /*阴影第一个x方向第二个y方向
               第三个模糊程度第四个扩展半径（阴影大小）第五个阴影颜色
               inset是将投影投外面，可不填默认投里面可重复添加*/
           }

盒子阴影

                {
               box-shadow: darkgrey 0px 0px 0px 300px inset ;/*阴影第一个x方向第二个y方向
               第三个模糊程度第四个扩展半径（阴影大小）第五个阴影颜色
               inset是将投影投外面，可不填默认投里面 */
           }

圆角

/*border-radius: 20%;（整体圆角）*/
               border-radius: 10px 20px 30px 40px ;
               /* 一共4个值的话左上右上右下左下*/
               /* 一共3个值的话左上右上左下右下*/
               /* 一共2个值的话左上左下右上右下*/
               /* 一共1个值的话全部角*/
               /*border-top-left-radius: 10%;*/
               /*border-top-right-radius: 20%;*/

过渡

transition: width 0.5s linear;
               /*transition-property:width,height(all)
               transition-duration:过渡时间
               transition-timing-function: linear(0.25,0.1,0.25,1.0)
                                           ease(0.0,0.0,1.0,1.0)
                                           ease-in()
                                           ease-out()
                                           ense-in-out
                                           cubic-bezier() 速度
               transition-delay:()延迟时间

css3自定义字体

@font-face{
font-family: myFirstFont; /*自定义字体名称*/
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9+ */
}
div{
font-family:myFirstFont; /*选择你自定义的字体*/
}

圆角边框

语法：border-radius: length/% ;

border-radius: 一个值；四个角都一样

border-radius: 值1 值2；值1表示左上角、右下角；值2表示右上角、左下角

border-radius: 值1 值2 值3；值1表示左上角；值2表示右上角、左下角；值3表示右下角

border-radius: 值1 值2 值3 值4；左上角、右上角、右下角、左下角

渐变

线性渐变
语法：background-image : linear-gradient(方向，颜色1 颜色1位置， ....)

方向：

渐变角度：单位deg 例如：45deg to 英文单词 to right 从左向右渐变

颜色位置：

数值+单位
可以是百分比
例如：

background-image: linear-gradient(45deg, red,pink);
background: linear-gradient(red 0%,pink 50%); /*image也可以省略不写*/
background-image: linear-gradient( to right, red 0px,pink 50px); /* 从左到右 */