• CSS3-圆角边框border-radius 盒子阴影border-shadow

    原有的css没有文本的阴影，只能通过图片的处理来添加这种效果

    鼠标悬停的动态效果，盒子的阴影效果

    w3c标准制定前，需要加前缀

    safari chrome浏览器的前缀 -wdbkit-

    firefox浏览器的前缀 -moz-

    opera 浏览器的前缀 -o-

    ie浏览器的前缀 -ms-

    圆角边框border-radius 四个角同时设置

                border-top-left-radius: ;左上角
                border-top-right-radius: ;右上角
                border-bottom-left-radius: ;左下角
                border-bottom-right-radius: ;右下角

    每个属性的取值有：水平值 垂直值         水平方向的值决定了距离左或右的距离 垂直方向的决定了上或者下的距离

    1. html>
    2. <html lang="en">
    3. 	<head>
    4. 		<meta charset="UTF-8">
    5. 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
    6. 		<title>首页title>
    7. 		<style type="text/css">
    8. 			*{
    9. 				padding: 0;
    10. 				margin: 0;
    11. 			}
    12. 		.box{
    13. 			display: grid; /*首先设置为网格容器*/
    14. 			width: 600px;
    15. 			height: 600px;
    16. 			border: 5px solid orange;
    17. 			margin: 100px auto;
    18. 			border-top-left-radius: 100px 200px;
    19. 			border-bottom-right-radius: 100px;
    20. 	
    21. 		}
    22. 		style>
    23. 		
    24. 	head>
    25.  
    26. 	<body>
    27. 		<div class="box">	
    28. 		div>
    29. 		
    30. 	body>
    31.  
    32. html>

     

      盒子阴影border-shadow

            inset:阴影效果在盒子内部“水平偏移 垂直偏移 模糊距离 颜色；

            outset或者不设置：外部阴影，

    1. html>
    2. <html lang="en">
    3. 	<head>
    4. 		<meta charset="UTF-8">
    5. 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
    6. 		<title>首页title>
    7. 		<style type="text/css">
    8. 			*{
    9. 				padding: 0;
    10. 				margin: 0;
    11. 			}
    12. 		.box{
    13. 			display: grid; /*首先设置为网格容器*/
    14. 			width: 500px;
    15. 			height: 500px;
    16. 			border: 5px solid orange;
    17. 			margin: 100px auto;
    18. 			box-shadow:100px 50px 100px orange; /*水平偏移 垂直偏移 模糊距离（阴影的虚幻距离） 颜色；*/
    19. 	
    20. 		}
    21. 		style>
    22. 		
    23. 	head>
    24.  
    25. 	<body>
    26. 		<div class="box">	
    27. 		div>
    28. 		
    29. 	body>
    30.  
    31. html>

     

     负数的效果

     

  • 相关阅读:
    杭州市IT行业人才需求地图信息系统的设计与实现
    three.js学习之vR展厅
    发现它，抓住它
    第三方支付功能测试点【杭州多测师_王sir】【杭州多测师】
    Django配合python进行requests请求
    教你用Elastic Search：运行第一条Hello World搜索命令
    【基础算法】几种特殊数(素数、公约数、完全数、亲密数) & C++实现
    LINQ to SQL （Group By/Having/Count/Sum/Min/Max/Avg操作符）
    Linux进程控制
    【QT】无法运行rc.exe
  • 原文地址：https://blog.csdn.net/weixin_47295886/article/details/125823135