outline-width
时间: 2023-07-09 18:55:18 浏览: 58
outline-width 是 CSS 属性之一,用于设置元素边框的宽度。它可以取值为一个长度值(如 "2px")或者是一个预定义的关键字(如 "thin"、"medium"、"thick")。当 outline-style 属性设置为 none 时,outline-width 将不起作用。另外,当使用 outline 属性时,可以同时设置 outline-width、outline-style、outline-color 三个属性值。
相关问题
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>键盘打字</title> <style> /* 基本界面样式 */ *{ /*margin: 0;*/ padding: 0; box-sizing: border-box; list-style: none; /*outline: 1px dashed purple;*/ } body{ display: flex; height: 100vh; justify-content: center;/* 水平居中*/ align-items: center; background-color: #000;/* 随内容撑开且垂直居中 */ } .keyboard{ outline-width: 3px; /*background-color: red;*/ } ul.row{ display: flex;/* 弹性布局 */ /* /*height: 300px; */ } ul.row li{ outline-width: 2px; width: 3em;/*em是根据当前字体大小*/ height: 3em; text-align: center; line-height: 3em; border-radius: .4em; color: rgba(0, 0, 0, 0.7); letter-spacing: 1px; margin: 0.4em; } /*设置宽度*/ #tab{ width: 5em; } #caps{ width: 6em; } #leftShift{ width: 8em; } #enter{ width: 6em; } #rightShift{ width: 8em; } #back{ width: 5em; } /*设置颜色*/ .little{ background-color: crimson; /*深红色的*/ border: 2px solid crimson; } .little.selected{ background-color: transparent; color: crimson; } .ring{ background-color: coral; /*珊瑚红*/ border:2px solid coral; } .ring.selected{ background-color: transparent; color: coral; } .middle{ background-color:darkorange; /*深橙色*/ border: 2px solid darkorange; } .middle.selected{ background-color: transparent; color: darkorange; } .forefinger1st{ background-color: gold; border: 2px solid gold; } .forefinger1st.selected{ background-color: transparent; color: gold; } .forefinger2nd{ background-color: khaki;
好的,您的代码大概是一个键盘打字的 HTML 页面,并且您想要了解如何选中某些 css 样式。
如果您想选中某些 css 样式,您可以使用以下方式:
1. 通过元素标签名选中样式:
```css
ul {
/* 选中所有 <ul> 元素 */
}
```
2. 通过 class 名称选中样式:
```css
.keyboard {
/* 选中 class 名称为 keyboard 的元素 */
}
```
3. 通过 id 名称选中样式:
```css
#caps {
/* 选中 id 名称为 caps 的元素 */
}
```
4. 通过属性选择器选中样式:
```css
li[type="button"] {
/* 选中所有 type 属性值为 button 的 <li> 元素 */
}
```
5. 通过伪类选择器选中样式:
```css
li:hover {
/* 当鼠标悬停在 <li> 元素上时选中 */
}
```
以上是一些常见的选中 css 样式的方式,您可以根据您的具体需求来选择不同的方式。希望可以帮到您!
/* 全局css变量 */ $--color-primary: #409EFF; .primary-color { color: #409EFF; } .background-opacity { background: rgba(64, 158, 255, 0.6); } .form-widget-list { .ghost{ content: ''; font-size: 0; height: 3px; box-sizing: border-box; background: #409EFF; border: 2px solid #409EFF; outline-width: 0; padding: 0; overflow: hidden; } } .el-form-item--medium { .el-radio { line-height: 36px !important; } .el-rate{ margin-top: 8px; } } .el-form-item--small { .el-radio { line-height: 32px !important; } .el-rate{ margin-top: 6px; } } .el-form-item--mini { .el-radio { line-height: 28px !important; } .el-rate{ margin-top: 4px; } } .el-card { margin-top: 3px; margin-bottom: 3px; } input[type="password"]::-ms-reveal { /* 隐藏IE/Edge原生的密码查看按钮 */ display: none; } /* 滚动条样式 begin */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { width: 8px; background: rgba(#101F1C, 0.1); -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em; } ::-webkit-scrollbar-thumb { background-color: rgba(#101F1C, 0.35); background-clip: padding-box; min-height: 28px; -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em; } ::-webkit-scrollbar-thumb:hover { background-color: rgba(#101F1C, 0.85); } * {//Firefox浏览器滚动条样式 scrollbar-color: #e5e5e5 #f7f7f9; //滚动条轨道颜色、滚动条滑块的颜色 scrollbar-width: thin; //thin模式下滚动条两端的三角按钮会消失 } /* body {//IE浏览器滚动条样式 scrollbar-shadow-color: #e5e5e5; scrollbar-face-color: #e5e5e5; scrollbar-base-color: #ffffff; scrollbar-arrow-color: #444040; } */ /* 滚动条样式 end */
这段代码定义了一些全局的 CSS 变量和样式,包括:
- 定义了一个名为 `$--color-primary` 的全局 CSS 变量,其值为 `#409EFF`。
- 定义了一个名为 `.primary-color` 的样式类,将其文本颜色设置为 `$--color-primary` 定义的颜色。
- 定义了一个名为 `.background-opacity` 的样式类,将其背景色设置为带有 60% 不透明度的蓝色。
- 定义了一个名为 `.form-widget-list` 的样式类,其中包含了一个名为 `.ghost` 的子样式类,将其高度设置为 3 像素,颜色设置为 `$--color-primary` 定义的颜色,边框为 2 像素宽的 `$--color-primary` 定义的颜色。
- 定义了 `.el-form-item--medium`、`.el-form-item--small` 和 `.el-form-item--mini` 三个样式类,分别对应中、小、迷你三种表单元素大小,对其内部的单选框和评分控件进行了样式调整。
- 定义了 `.el-card` 样式类,将其上下 margin 值设置为 3 像素。
- 定义了一些滚动条的样式,包括滚动条宽度、颜色等等。其中包括针对不同浏览器的样式设置。