前端常百度的几个样式写法

最新推荐文章于 2024-08-25 09:57:22 发布

日辰Chen

最新推荐文章于 2024-08-25 09:57:22 发布

阅读量168

点赞数

分类专栏：前端css 文章标签：前端 css

本文链接：https://blog.csdn.net/qq_27005325/article/details/122376802

版权

前端css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文详细讲解了网页设计中如何运用线性、径向、角度渐变，以及三角形边框技巧。通过实例展示了如何创建从上到下、斜向和圆形的渐变效果，以及利用CSS绘制不同形状的三角形。适合前端开发者深入理解CSS3图形效果。

摘要由CSDN通过智能技术生成

1、渐变

从上到下：background-image: linear-gradient(to bottom, red, yellow);

线性：background-image: linear-gradient(to bottom right, red, yellow);

径向：background-image: radial-gradient(red 5%, yellow 15%, green 60%);

角度：background-image: linear-gradient(-90deg, red, yellow);

2、三角形

{
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}

{
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-right: 100px solid transparent;
}

{
width: 50px;
height: 50px;
border-top: 2px solid #7de87d;
border-right: 2px solid #7de87d;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}