| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162 |
- <!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>
- /*
- 类选择器
- 在body标签中
- 在开始标签里 通过class="名字"
- 在style标签里
- .名字 {样式...}
- */
- .box {
- width: 200px;
- height: 200px;
- /* 边框
- 复合属性
- border: width style color;
- border-width 边框粗细
- border-style 边框样式
- dashed 虚线
- solid 实线
- dotted 点线
- double 双线
- border-color 边框颜色
- border-top 边框上
- border-right 边框右
- border-bottom 边框下
- border-left 边框左
- 圆角边框：
- border-radius
- 50% 圆形
- border-top-left-radius 左上角圆角
- border-top-right-radius 右上角圆角
- border-bottom-left-radius 左下角圆角
- border-bottom-right-radius 右下角圆角
- */
- border: 1px solid #000;
- border-width: 10px;
- border-style: solid;
- border-color: #0f0;
- border-bottom: 1px solid #f00;
- border-radius: 50%;
- /* border-top-left-radius: 20px; */
- }
- input {
- /*
- 轮廓 outline 所有属性都与border一致
- */
- outline: 2px dashed #f00;
- /* outline: none; */
- /* border: none; */
- }
- </style>
- </head>
- <body>
- <input type="text">
- <div class="box"></div>
- </body>
- </html>
|
