CSS3那些常用的效果

FAILED
白色玫瑰 程序猿

时间: 2023-07-15 阅读: 1 字数:3803

sjxi.cn
三角形: \r\n\r\n.triangle{    width:0;height:0;    border:10px solid transparent;    border-top-color:red; //三角形的方向(相反)、颜色    //border-left:10px solid red;修改大小以及厚度}//使用伪类来是实现文字后面的箭头.triangle{position:relativ...

目录

    三角形:

    1. .triangle{
    2.     width:0;height:0;
    3.     border:10px solid transparent;
    4.     border-top-color:red; //三角形的方向(相反)、颜色
    5.     //border-left:10px solid red;修改大小以及厚度
    6. }
    7. //使用伪类来是实现文字后面的箭头
    8. .triangle{position:relative;}
    9. .triangle:after,.triangle:before{
    10.   content:'';
    11.   width:0;
    12.   height:0;
    13.   border:10px solid transparent;
    14.   border-left:10px solid red;
    15.   position:absolute;
    16.   left:52px;
    17. }
    18. //如果想使单线条 after、before 的border-left:10px solid #ccc; 再使用伪类即可
    19. .triangle:before{
    20.   border-left-color:red;//需要设置的颜色
    21.   left:53px;
    22. }

    内容箭头(用伪类来实现)
      // 箭头 - :before and :after, 一起组成了好看的气泡小箭头

    1. .tip:before { //div名称
    2.         position: absolute;
    3.         display: inline-block;
    4.         border-top: 7px solid transparent;
    5.         border-left: 7px solid #eee; //箭头放的方向
    6.         border-bottom: 7px solid transparent;
    7.         border-left-color: rgba(0, 0, 0, 0.2); //设置透明度0-1直接
    8.         right: -8px;
    9.         top: 20px;
    10.         content: '';
    11. }
    1. //背景阴影
    1. .tip:after {
    2.       position: absolute;
    3.       display: inline-block;
    4.       border-top: 6px solid transparent;
    5.       border-left: 6px solid #eee;
    6.       border-bottom: 6px solid transparent;
    7.       right: -6px; //偏移像素
    8.       top: 21px;
    9.       content: '';
    10. }

    css3美化table

    1. //.bordered table的class
    2. .bordered {font-family: 'trebuchet MS', 'Lucida sans', Arial;color: #444;}
    3. .bordered th {-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;-moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;/*表格阴影效果*/
    4.         text-shadow: 0 1px 0 rgba(255,255,255,.5);/*文字阴影效果*/background-color: #dce9f9;/*gradient制作表头渐变色*/
    5.         background-image: -webkit-gradient(linear, left top, left bottom, from(#ebf3fc), to(#dce9f9));
    6.         background-image: -webkit-linear-gradient(top, #ebf3fc, #dce9f9);
    7.         background-image: -moz-linear-gradient(top, #ebf3fc, #dce9f9);
    8.         background-image: -ms-linear-gradient(top, #ebf3fc, #dce9f9);
    9.         background-image: -o-linear-gradient(top, #ebf3fc, #dce9f9);
    10.         background-image: linear-gradient(top, #ebf3fc, #dce9f9);
    11.         filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#ebf3fc, endColorstr=#dce9f9);
    12.         -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#ebf3fc, endColorstr=#dce9f9)";
    13. }
    14. .bordered th:first-child {-moz-border-radius: 6px 0 0 0;-webkit-border-radius: 6px 0 0 0;border-radius: 6px 0 0 0;}
    15. .bordered th:last-child {-moz-border-radius: 0 6px 0 0;-webkit-border-radius: 0 6px 0 0;border-radius: 0 6px 0 0;}
    16. .bordered tr:last-child td:first-child {-moz-border-radius: 0 0 0 6px;-webkit-border-radius: 0 0 0 6px;border-radius: 0 0 0 6px;}
    17. .bordered tr:last-child td:last-child {-moz-border-radius: 0 0 6px 0;-webkit-border-radius: 0 0 6px 0;border-radius: 0 0 6px 0;}

    转载于:https://www.cnblogs.com/houzhao/p/5579788.html

    原文地址:https://blog.csdn.net/weixin_30663471/article/details/98671066?ops_request_misc=&request_id=6c19665b5171484fa1ff5cf64d700d68&biz_id=&utm_medium=distribute.pc_search_result.none-task-blog-2~all~koosearch~default-12-98671066-null-null.142^v88^insert_down28v1,239^v2^insert_chatgpt&utm_term=css3%E7%89%B9%E6%95%88

    本文章网址:sjxi.cn/detil/f02e6ae5bb0445e7b2dd703f6976026f

    打赏作者

    本站为非盈利网站,如果您喜欢这篇文章,欢迎支持我们继续运营!

    最新评论
    当前未登陆哦
    登陆后才可评论哦

      湘ICP备2021009447号

      ×

      (穷逼博主)在线接单

      QQ: 1164453243

      邮箱: abcdsjx@126.com

      前端项目代做
      前后端分离
      Python 爬虫脚本
      Java 后台开发
      各种脚本编写
      服务器搭建
      个人博客搭建
      Web 应用开发
      Chrome 插件编写
      Bug 修复