海贼王某人的博客

html内容无法复制，将页面内容设置为无法复制的属性，前端把网站内容设置成无法复制的状态，CSS禁止文字选择user-select属性，设置文本内容为只读状态，加了上面一串代码后，我们的body里面的所有内容将无法被复制，接下来详细看看user-select的其他属性。

element-ui之el-dialog弹框内容无法复制的问题解决，el-dialog弹框内容不等复制，el-table表格内容无法复制问题看一下解决后的效果，内容是可以被复制的，之前是无法复制的，看一下问题就出在下面这窜代码上，吧这个代码注释掉就可以复制了，相对的，如果不希望内容被复制的话，就加上这个属性user-select: none;这个代码的意思就是样式内的元素将无法被选中，也就是不能复制。

那么具体我们项目中怎么实现呢？看看下面的代码，应该大部分是可以实现的，至少我所负责的项目，移动端和pc端是实现了相应的效果，pc端对于ie10及以下的版本，是无法兼容的，如果有哪位大佬可以兼容ie10，可以吧代码分享在评论区，一起帮助大家解决问题。看看效果图如下：页面变成灰色样式。

今天遇到一个兼容性问题，iso，12,13一下部分机型无法显示渐变色文字，正常手机显示如下:ISO如下：解决办法如下，你可以理解为兼容性问题，但是兼容性写法不一样可以解决：如果兼容性写法无法解决，试试下面的方法，主要原因就是display:block,不要用display：flex,父元素子元素避免使用display：flex,我就是使用了flex属性后导致IOS部分机型无法显示。

在项目中，我们经常遇到这样的需求，高度或者宽度需要按照比例显示，这时候就可以使用aspect-ratio属性解决问题，也可以使用padding-top: 解决// padding-top.container { width: 100%; padding-top: 50%;}// aspect-ratio 例：宽100，高50.container { width: 100%; aspect-ratio: 2 / 1;}.container { height: 100%;

实现效果如下图，直接给我们的外城盒子加上这个class即可.hidden-text { overflow: hidden; word-break: break-all; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; margin-bottom: 20rpx;}...

先看一下最终的效果图吧：第一种文字内容超出显示滚动条：父盒子：横向超出滚动：overflow-x: scroll;.box { width: 100%; box-sizing: border-box; overflow-x: scroll;}子盒子：内容不换行 white-space:nowrap;.item { white-space:nowrap;}实现效果，超出滚动：如下图：这个会发现即使内容没超出还是有滚动条占位如下图：这里吧**overflow-x:

背景透明度1.设置透明背景色rgbabackground-color:rgba(220,38,38,0.2);2.通过opacity属性改变透明度background: #43bff5; opacity:0.2; 背景色透明background: transparent;

直接在app.vue文件中加上一下代码即可，这是我收集的比较全的字体样式，从第一个向后找，系统有就默认显示第一个，依次往后找：<style lang="scss">body { font-family:”Microsoft YaHei”,Arial,Helvetica,sans-serif,”宋体”;}</style>你学废了吗！...

先来段HTML代码 <div class="box"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div>选择box里面第一个div添加样式：.box > div:first-child { color: #7F7F7F;

CSS3盒子边框阴影，内阴影外阴影// X：横向阴影（偏移值）// Y：纵向阴影（偏移值）// Z：扩散面积// #FF00FF：阴影颜色 box-shadow: X Y Z #FF00FF;

我们先在styles文件夹内声明一个variables.scss文件然后再声明几个样式,如下图然后在我们的vue.config.js文件里面加上如下配置即可module.exports = { css: { loaderOptions: { sass: { prependData: `@import "@/styles/variables.scss";` } } }}这样我们就可以在全局直接调用我们文件里面声明的变量名了，是不是很方

.icon1 { //向上的小三角，一边颜色自定义，其他三条边设置透明色即可 width: 0; height: 0; border-bottom: 15px solid #ff0000; border-top: 10px solid transparent; border-right: 10px solid transparent; border-left: 10px solid transparent;}.icon2 { //向下的小三角，一边颜色自定义，其他三条边

正常的输入框获取焦点后的样式很简单，直接使用伪类选择器：input:focus { background: rgb(255, 150, 147); color: blue; border: 2px solid greenyellow;}这样就解决了，很简单吧，你学废了吗？

看一下我自己写的效果，然后看代码，有注释可以自定义：<view class="box"> <text class="open-icon1"> <text class="icon-p1">|</text> <text class="icon-p2">|</text> <text class="icon-p3">|</text> </text></view>.

好了先看看实现后的效果吧，样式可以自定义修改的，代码很容易看懂，新手都可以用；上面是选中状态，下面是未选中状态，支持反选多选取消选中，看下面代码：<!-- HTML部分 --><div class="checkbox"> <input type="checkbox" id="checkbox1"/> <label for="checkbox1"><span class="icons"></span></labe

本方案支持颜色自定义，高亮行数自定义，可高亮多行，可定义多个颜色，主要实现方式是css样式，代码简单易懂，下面看效果和代码吧：当前效果：预期效果：代码：这是HTML代码 绑定这个属性:row-class-name=“tableRowClassName”<el-table:data="tableData" style="width: 100%" :row-class-name="tableRowClassName"> <el-table-column prop="d

最近vue开发，遇到一个页面样式上的问题，单选框和多选框的样式显示问题，看下图片吧：这是官方组件的显示效果，项目效果需求如下图找了很多资料，最后终于解决了，边看代码边解释吧：这里的.right是我自定义的类名，父盒子，我的单选组是直接放在这个盒子里面的，下面的写法是vue的scss写法，不懂得可以先去了解一下； .right{ width: 40%; border-bottom: 1px solid #cacaca;