|
|
@@ -0,0 +1,79 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>Document</title>
|
|
|
+ <style>
|
|
|
+ div {
|
|
|
+ width: 800px;
|
|
|
+ height: 800px;
|
|
|
+ /* 边框
|
|
|
+ 复合属性
|
|
|
+ */
|
|
|
+ /* 边框粗细 */
|
|
|
+ border-width: 12px;
|
|
|
+ /* 边框样式
|
|
|
+ solid 实线
|
|
|
+ dashed 虚线
|
|
|
+ dotted 点线
|
|
|
+ double 双边框
|
|
|
+ */
|
|
|
+ /* color 颜色 */
|
|
|
+ color: #f00;
|
|
|
+ border-style: double;
|
|
|
+ /* 边框颜色 */
|
|
|
+ border-color: red;
|
|
|
+ /* border:5px solid rgb(255,255,0); */
|
|
|
+ /* background: url('../1.html/images/1.png') no-repeat; */
|
|
|
+ /* background-size: cover; */
|
|
|
+ background: #ff0;
|
|
|
+ /* 透明 */
|
|
|
+ background: transparent;
|
|
|
+ /* opacity: .5; */
|
|
|
+ /* background-color: rgba(0,0,255,.5); */
|
|
|
+ /* border-top: 10px solid #00f; */
|
|
|
+ /*
|
|
|
+ border-top
|
|
|
+ border-bottom
|
|
|
+ border-right
|
|
|
+ border-left
|
|
|
+ */
|
|
|
+ /* 圆角边框 */
|
|
|
+ border-radius: 20px;
|
|
|
+ /*
|
|
|
+ border-bottom-right-radius 右下
|
|
|
+ border-top-right-radius 右上
|
|
|
+ border-bottom-left-radius 左下
|
|
|
+ border-top-left-radius 左上
|
|
|
+ */
|
|
|
+ border-bottom-right-radius: 50px;
|
|
|
+ }
|
|
|
+ /*
|
|
|
+ opacity:0~1
|
|
|
+ 颜色 rgba: a=> alpha 透明度（0-1）
|
|
|
+ 红 #f00 #ff0000 rgb(255,0,0)
|
|
|
+ 黄 #ff0 #ffff00 rgb(255,255,0)
|
|
|
+ 蓝 #00f #0000ff rgb(0,0,255)
|
|
|
+ 绿 #0f0 #00ff00 rgb(0,255,0)
|
|
|
+ 黑 #000 #000000 rgb(0,0,0)
|
|
|
+ 白 #fff #ffffff rgb(255,255,255)
|
|
|
+
|
|
|
+ */
|
|
|
+ input {
|
|
|
+ /* border: none; */
|
|
|
+ /*
|
|
|
+ 轮廓
|
|
|
+ 所有属性与border相同
|
|
|
+ outline
|
|
|
+ */
|
|
|
+ outline: none;
|
|
|
+ outline: 1px solid #ff0;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <div>12121</div>
|
|
|
+ <input placeholder="请输入你喜欢的颜色">
|
|
|
+</body>
|
|
|
+</html>
|
e