outline相关知识
-
CSS outline-style 属性： CSS3 outline-offset 属性none 默认。定义无轮廓。 dotted 定义点状的轮廓。 dashed 定义虚线轮廓。 solid 定义实线轮廓。 double 定义双线轮廓。双线的宽度等同于 outline-width 的值。 groove 定义 3D 凹槽轮廓。此效果取决于 outline-color 值。 ridge 定义 3D 凸槽轮廓。此效果取决于 outline-color 值。 inset 定义 3D 凹边轮廓。此效果取决于 outline-color 值。 outset 定义 3D 凸边轮廓。此效果取决于 outline-color 值。 inherit 规定应该从父元素继承轮廓样式的设置。
-
CSS属性: 阴影 轮廓 渐变注: 本文摘自 宁静致远 - CSDN / 但愿人长久 千里共婵娟 - CSDN阴影使用box-shadow属性可以为元素添加阴影效果, 比如box-shadow: h-shadow v-shadow blur spread color inset;关键字是否必须作用值h-shadow是阴影的水平偏移量长度值，正值代表阴影向右偏移，负值代表阴影向左偏移v-shadow是阴影的垂直偏移量长度值，正值代表阴影向下偏移，负值代表阴影向上偏移blur否模糊值长度值，值越大盒子的边界越模糊，默认值0，边界清晰spread否阴影的延伸半径长度值，正值代表阴影向盒子各个方向延伸扩大，负值代表阴影沿相反方向缩小color否阴影的颜色颜色值，如果省略，浏览器会自行选择一个颜色inset否将外部阴影设置为内部阴影布尔类型轮廓轮廓是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用, 比如outline: outline-width outline-style outline-color;关键字作用值outline
-
【基础】CSS实现多重边框的5种方式简言 目前最优雅地实现多重边框的方案是利用CSS3 的 box-shadow属性，但如果要兼容老的浏览器，则需要选择其它的方案。本文简要地列举了几种多重边框的实现方案，大家可以根据项目实际及兼容性要求等情况，选择最适合的实现方案。 1 利用描边(outline)属性 方案1利用描边(outline)属性结合border属性实现双重边框。此方案实现简单，兼容性好，能兼容除IE6,7以外的浏览器。 1.1 核心代码 .borders { border: solid 6px #fff; outline: solid 6px #888; } 1.2 演示程序 演示
-
元素contentEditable内容改变事件：onKeyUp去掉边框：outline: none；
outline相关课程
-
PHP入门篇 本教程带领大家轻松学习PHP基础知识，了解PHP中的变量、变量的类型、常量等概念，认识PHP中的运算符，通过本教程学习能够掌握PHP中顺序结构、条件结构、循环结构三种语言结构语句。
讲师：Kings 入门 449295人正在学习
outline相关教程
- 4. 不使用 form 提交表单 不使用 form 标签来提交表单，通常都是使用 AJAX 进行数据交互的情况。这个时候就不需要拦截 form 的提交行为了。<style> h3 {margin-top: 0;color: #4caf50;} .login {width: 300px;padding: 32px;box-shadow: 2px 2px 10px rgba(0, 0, 0, .1);position: fixed;top: 40%;left: 50%;transform: translate(-50%, -50%);} .form-item {display: flex;margin-bottom: 16px;border-bottom: 1px solid #ccc;} .form-item .title {width: 70px;color: #666;font-size: 14px;} .form-item .content {flex: 1;} .form-item .content input {width: 100%;border: 0 none;padding: 2px 8px;outline: none;font-size: 16px;} .login-btn {width: 100%;border: 0 none;background-color: #4caf50;color: white;margin-top: 16px;outline: none;height: 32px;} .login-btn:active {background-color: #2da050;}</style><div class="login"> <h3>登入</h3> <label class="form-item"> <div class="title">用户名</div> <div class="content"> <input autocomplete="off" id="account" class="account" name="account" type="text"> </div> </label> <label class="form-item"> <div class="title">密码</div> <div class="content"> <input autocomplete="off" name="pwd" type="password"> </div> </label> <div> <button class="login-btn" type="button">登入</button> </div></div><script>var loginBtn = document.querySelector('.login-btn');var pwdEle = document.querySelector('[name="pwd"]');function login(cb) { // 假装登入花了 1 秒 setTimeout(function() { alert('登入成功'); cb && cb(); }, 1000);}loginBtn.addEventListener('click', function() { var pwd = pwdEle.value; if (pwd.length < 6 || pwd.length > 16) { alert('密码长度 6-16'); return; } login(function() { window.location.href = 'https://imooc.com'; });});</script>使用这种方式，就可以自主控制流程，不需要再考虑 form 标签的行为。
- 2. 获取表单内容 获取表单内容，实际上就是取到表单项对应的 DOM 节点的值。获取 DOM 节点的方式非常多，前面的章节也有介绍。<style> h3 {margin-top: 0;color: #4caf50;} .login {width: 300px;padding: 32px;box-shadow: 2px 2px 10px rgba(0, 0, 0, .1);position: fixed;top: 40%;left: 50%;transform: translate(-50%, -50%);} .form-item {display: flex;margin-bottom: 16px;border-bottom: 1px solid #ccc;} .form-item .title {width: 70px;color: #666;font-size: 14px;} .form-item .content {flex: 1;} .form-item .content input {width: 100%;border: 0 none;padding: 2px 8px;outline: none;font-size: 16px;} .login-btn {width: 100%;border: 0 none;background-color: #4caf50;color: white;margin-top: 16px;outline: none;height: 32px;} .login-btn:active {background-color: #2da050;}</style><form name="login-form" class="login"> <h3>登入</h3> <label class="form-item"> <div class="title">用户名</div> <div class="content"> <input id="account" class="account" name="account" type="text"> </div> </label> <label class="form-item"> <div class="title">密码</div> <div class="content"> <input name="pwd" type="password"> </div> </label> <div> <button class="login-btn" type="submit">登入</button> </div></form><script> var account1 = document.getElementById('account'); var account2 = document.getElementsByName('account'); var account3 = document.getElementsByClassName('account'); alert(account1 === account2[0]); alert(account1 === account3[0]); var account4 = document.forms['login-form']['account']; alert(account1 === account4); console.log(document.forms['login-form'].elements);</script>前三种获取节点的方式读者都已经熟悉了。account4 的获取方式稍微有点不一样，document.forms 是文档内的表单集合，其可以通过表单的 id 和 form 的属性，取到具体的某个表单。取到表单后，还可以直接使用表单项的 name 属性取到对应的表单项，使用 elements 可以取到这个表单下的所有表单项。
- 6. 改造 App.vue <template> <div id="app"> <el-container style="height: 100%; border: 1px solid #eee"> <el-aside width="200px" style="background-color: rgb(238, 241, 246)"> <el-menu router> <el-menu-item index="/list"> <i class="el-icon-menu"></i> <span slot="title">待办列表</span> </el-menu-item> <el-menu-item index="/add"> <i class="el-icon-circle-plus-outline"></i> <span slot="title">添加待办</span> </el-menu-item> </el-menu> </el-aside> <el-container> <el-main> <router-view /> </el-main> </el-container> </el-container> </div></template><script>import { mapActions } from "vuex";export default { name: "App", components: {}, methods: { ...mapActions(["initList"]) }, created() { this.initList(); }};</script><style lang="scss">* { padding: 0; margin: 0;}#app { height: 100%;}</style>
- 3. 校验表单项 获取到表单项后，就可以对表单项的值做判断了，如密码必须是 6-16 位：<style> h3 {margin-top: 0;color: #4caf50;} .login {width: 300px;padding: 32px;box-shadow: 2px 2px 10px rgba(0, 0, 0, .1);position: fixed;top: 40%;left: 50%;transform: translate(-50%, -50%);} .form-item {display: flex;margin-bottom: 16px;border-bottom: 1px solid #ccc;} .form-item .title {width: 70px;color: #666;font-size: 14px;} .form-item .content {flex: 1;} .form-item .content input {width: 100%;border: 0 none;padding: 2px 8px;outline: none;font-size: 16px;} .login-btn {width: 100%;border: 0 none;background-color: #4caf50;color: white;margin-top: 16px;outline: none;height: 32px;} .login-btn:active {background-color: #2da050;}</style><form name="login-form" class="login" action="https://imooc.com"> <h3>登入</h3> <label class="form-item"> <div class="title">用户名</div> <div class="content"> <input autocomplete="off" id="account" class="account" name="account" type="text"> </div> </label> <label class="form-item"> <div class="title">密码</div> <div class="content"> <input autocomplete="off" name="pwd" type="password"> </div> </label> <div> <button class="login-btn" type="submit">登入</button> </div></form><script> var loginForm = document.forms['login-form']; var pwdEle = loginForm.pwd; loginForm.onsubmit = function(e) { var pwd = pwdEle.value; if (pwd.length < 6 || pwd.length > 16) { alert('密码长度 6-16'); return false; // 可以使用 return e.preventDefault() 代替 } setTimeout(function() { alert('登入成功，马上跳转！'); }, 1000); };</script>这里获取到了表单元素，同时给表单的事件处理器属性 onsubmit 赋值，表示在表单被提交的时候做的事情。在事件处理器中，通过输入框的 value 属性获取到了输入的值，对值进行了长度判断，如果长度不正确则返回 false，表单则会终止提交。如果正确，则会根据 form 标签的 target 属性进行提交。需要注意的是，这里如果使用 addEventListener 来监听 submit 事件，必须使用 preventDefault 来阻止默认事件，即阻止表单提交，不能使用 return false;。var loginForm = document.forms['login-form'];var pwdEle = loginForm.pwd;loginForm.addEventListener('submit', function(e) { var pwd = pwdEle.value; if (pwd.length < 6 || pwd.length > 16) { alert('密码长度 6-16'); e.preventDefault(); // 代替return false return; } setTimeout(function() { alert('登入成功，马上跳转！'); }, 1000);});
- 4. VSCode 配置 Go 语言开发环境 安装结束之后就需要配置 Go 语言的开发环境了。因为 Go 语言的插件很多链接无法直接访问，所以我们需要手动链接，可以打开任意的 go 文件，这样 VSCode 会自动帮你安装 Go 的插件。在你的 GOPATH（GOPATH 均指环境变量中的第一个文件夹路径）下新建三个文件夹—— bin 、pkg 和 src ；在 src 下创建目录 golang.org\x；在 %GOPATH%\src\``golang.org\x 目录下载插件源码。git clone https://github.com/golang/tools.git然后使用下列命令来安装 Go 语言的插件：go get github.com/ramya-rao-a/go-outline go get github.com/acroca/go-symbols go get golang.org/x/tools/cmd/guru go get golang.org/x/tools/cmd/gorename go get github.com/josharian/impl go get github.com/rogpeppe/godef go get github.com/sqs/goreturns go get github.com/golang/lint/golint go get github.com/cweill/gotests/gotests最后你可以看到 %GOAPTH%/bin 中已经把插件安装完毕。为了使其生效，还需要将这个文件夹配置进环境变量Path 中：将 bin 目录添加到环境变量中最后一步就是在 VSCode 中安装 Go 语言的高亮插件，在插件库搜索 go，第一个就是，直接点击安装即可：安装 Go 语言的代码高亮插件
- 2. 使用 CustomEvent 构造函数 上面使用 Event 构造函数的例子，将其替换成 CustomEvent 构造函数也是一样可以执行的。543两个例子效果是一样的。其主要的区别在参数和工作环境上，CustomEvent 是可以在 WebWorker 中被使用的，而 Event 不行。CustomEvent 可以在构造函数的第二个参数中传递 detail 属性，在事件触发时，事件对象中就会携带这个 detail 属性。假设现在想完成一个键盘的点击事件，即键盘上某个键按下并弹起后做的事情。544这里通过 keyup 事件，在事件处理器的最末尾增加了一个 keyclick 事件。这里并没有结合 keydown 来判断按键的落下和弹起，因为一个按键要弹起，必定得先落下，所以只需要监听 keyup。其实可以看出这段代码比较奇怪，真正的业务场景并不会这样写，会选择直接调用 onKeyClick 函数。<style> input {width: 200px;padding: 8px;font-size: 16px;outline: none;border: 1px dashed #4caf50;} input:focus {border: 1px solid #4caf50;}</style><div> <input type="text"></div><script> var inputEle = document.querySelector('input'); var onKeyClick = function(value, keyCode) { alert('现在输入框内容是：' + value + '，触发的键是：' + keyCode); }; inputEle.addEventListener('keyup', (e) => { console.log('键盘按键弹起了'); onKeyClick(e.target.value, e.keyCode); });</script>这段代码的执行结果和采用 CustomEvent 的效果是一样的。这就是为什么自定义事件更常用于框架或者库，因为暴露事件有时候比单纯的提供回调配置项更好理解和解耦。
outline相关搜索
-
oauth
object
object c
objective
objective c
objective c基础教程
objective c教程
objectivec
office visio 2003
offsetof
offsetparent
offset函数
okhttp
on on
on time
onbeforeunload
onblur
onclick
oncontextmenu
online