CSS3样式

亦凉 2023-06-25 04:46 9阅读 0赞

1、CSS3边框  
（1）CSS3圆角

.div
    { 
    border:2px solid #00FF00;
    border-radius:25px;
    }

（2）CSS3盒阴影

.div
    { 
    box-shadow: 10px 10px 5px #888888;
    }

2、table表设置各个边框对应不同的颜色

border-left: 2px solid #E8E8E8;
    border-top: 2px solid #E8E8E8;
    border-right: 2px solid #E8E8E8;
    border-bottom: 2px solid #E8E8E8;

3、时间类型为datatime（年月日时分秒），如何选择输入日  
需要引入一个js文件，rolldate.min.js

<!DOCTYPE html>
    <html>
    	<head>
    		<title></title>
    		<meta charset="utf-8">
    		<meta http-equiv="Expires" content="0">
    		<meta http-equiv="Pragma" content="no-cache">
    		<meta http-equiv="Cache-control" content="no-cache">
    		<meta http-equiv="Cache" content="no-cache">
    		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    		<meta charset="utf-8">
    		<link rel="stylesheet" type="text/css" href="../../css/back_school/other_transport.css" />
    		<link rel="stylesheet" type="text/css" href="../../css/mobile/all.css" />
    		<script type="text/javascript" src="../../plugins/rolldate.min.js"></script>
    		<style type="text/css"> .start { padding-top: 20px;text-align: center;} #startTime { margin-left: 20px;margin-right: 20px;height: 25px;width: 80%;text-align: center;} </style>
    	</head>
    	<body>
    		<div class="start">
    			<input readonly type="datetime" id="startTime" placeholder="请选择日期" >
    		</div>
    	</body>
    	<script type="text/javascript"> // 页面加载时执行; window.onload = function() { new Rolldate({ el: '#startTime', format: 'YYYY-MM-DD hh:mm', beginYear: 2000, endYear: 2100 }); } </script>
    </html>

效果如图所示  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ5NTY3OA_size_16_color_FFFFFF_t_70]  
n、CSS3 弹性盒子  
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。  
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。  
弹性容器内包含了一个或多个弹性子元素。  
注意：① 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局  
②弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行  
③以下元素展示了弹性子元素在一行内显示，从左到右

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS3 弹性盒子-center</title> <style> .flex-container { 
    				display: -webkit-flex;
    				display: flex;
    				-webkit-justify-content: center;
    				justify-content: center;
    				width: 400px;
    				height: 140px;
    				background-color: #00FF00;
    			}
    			
    			.flex-item { 
    				background-color: cornflowerblue;
    				width: 120px;
    				height: 115px;
    				margin: 10px;
    				border-style: solid;
    				border-color: #EEE9E9;
    			}
    		</style>
    	</head>
    
    	<body>
    
    		<div class="flex-container">
    			<div class="flex-item">flex item 1</div>
    			<div class="flex-item">flex item 2</div>
    			<div class="flex-item">flex item 3</div>
    		</div>
    	</body>
    
    </html>

![在这里插入图片描述][20191225213552708.png]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ5NTY3OA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2020030823111279.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ5NTY3OA==,size_16,color_FFFFFF,t_70
[20191225213552708.png]: https://img-blog.csdnimg.cn/20191225213552708.png