首页 > TAG信息列表 > 2px

css画矩形的凹陷及突出效果box-shadow

外边框颜色渐变   background: linear-gradient(to right, white, #f0f6fe, #e5eff7);   border: solid 2px #d3def2;   margin: 10px 0;   padding: 12px 16px 18px; 想画一个内容区域矩形框凹陷的效果  padding: 30px 30px 20px 25px;     box-shadow: inset 0px 2px

查漏补缺——说说box-shadow

问题 如题所示 答案 相关源码: box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); CSS3box-shadow属性详解 box-shadow详解 CSS —— 盒子阴影(box-shadow) 按照顺序解释上面源码的参数的意思: 0指的是x轴偏移量是0、 2px指的是y轴偏移量是2px 12px指的是阴影模糊半径是12px 0指

el-table边框打印时候没有显示

参考文档:https://www.csdn.net/tags/NtzaYg2sMTY2NDgtYmxvZwO0O0OO0O0O.html 因为用pt作为单位,结果1px的边框显示不了 /deep/ .el-table td, /deep/ .el-table th.is-leaf { border-bottom: 2px solid #f8f8f9!important; } /deep/ .el-table--border t

element plus 中 el-radio 选中聚焦的时候会有光圈的问题

在我们使用 el-radio 有时候选中聚焦之后,就会发现小圆圈有点模糊,外面有一层光圈。这是因为element plus的底层css封装了样式,f12找到radio,hover选择focus就会看到。 解决这个问题也很简单,只要样式覆盖就可以: .el-radio:focus:not(.is-focus):not(:active):not(.is-disabled) .el-r

小程序入门

小程序 wxss 1.demo01{ writing-mode: vertical-lr; 字体方向 font-size: xx-large; 字体大小 font-weight: 500; 字体宽度 font-family: sans-serif; 字体类型 color: cyan; 颜色 text-align: left; 文本对齐方式 display: flex; 弹性布局 font-style: inherit; 斜体或正

css零到一基础教程038:CSS 文本阴影

文本阴影 text-shadow 属性为文本添加阴影。 最简单的用法是只指定水平阴影(2px)和垂直阴影(2px): 实例 <!DOCTYPE html> <html> <head> <style> h1 { text-shadow: 2px 2px; } </style> </head> <body> <h1>文本阴影效果!</h1> </body> </html>

input框中右面的箭头

.wxml中代码              <view class="arrowA"></view>   .wxss中代码 .arrowA{   width: 7px;   height: 7px;   border-top: 2px solid #999;   border-right: 2px solid #999;   transform: rotate(45deg);   position: relative;   top

css 居中 转载

在介绍居中方式之前,简单介绍一下行内元素和块级元素。 行内元素 和其他元素都在同一行 高,行高及外边距和内边距部分可以改变 宽度只与内容有关 行内元素只能容纳文本或者其他行内元素 常用内联元素:a,img,input,lable,select,span,textarea,font 块级元素 总是在新行上开始,占据

Day9

今天找了几个html模板了解了其内容并进行了一遍编译。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewp

css3的一个小动画-----声音跳动

做视频的时候感觉每集在播放的时候有一个小动画在跳动感觉挺好看的,就觉得自己也要做一个,以前做的那个不是在同一个底线上的,他是来回跳动的,看着有点乱1,这星期我就把他的高度调了一下,后来发现我做的和爱奇艺上的是上下颠倒的,试试translateY的正负,发现越试越离谱,最后就想到了转

css实现图片的瀑布流且右上角有计数

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>图片背景铺满</title> <style> .container{ column-count: 4; column-gap: 2; }

css-base-圆角控制文本小技巧

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=d

css 直播柱状动图

    .live-anime { display: inline-block; vertical-align: bottom; width: 2px; background-color: white; border-radius: 2px 2px 0 0; margin-left: 2px; } .live-anime0 { height: 8px; animation: liveAnime0 1s i

10.26HTML笔记

1.左右分栏效果:<dl> <dt>分类1</dt> <dd> <ul> <li>列表1</li> </ul> </dd> </dl> <dl> <dt>分类2</dt> <dd> <ul> <li>列表s1&

Vue模仿ant-design实现的时间轴(Timeline)

效果图如下: ①创建时间轴组件Timeline.vue: <template> <div class="m-timeline-area"> <div class="m-timeline"> <div :class="['m-timeline-item', {'last': n === totalDots}]"

CSS3 伪元素的使用

文章目录 前言一、::before二、::after三、::first-letter四、::selection总结 前言 回来看下伪元素. CSS3要求使用双冒号来表示伪元素了. 一、::before before初始位置于元素左上(但并不是紧贴左上,有一段很小的距离); 初始无大小(加颜色也看不见).由于具备行内元素特

11.margin外边距

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <!--外边距的妙用:居中元素 7 margin: 0 auto; 8 --> 9 <style> 10

网站建设之CSS中用类选择器实现登录表单

效果图: 代码: <html> <head> <title>登录页面</title> <style type="text/css"> .box1{border:solid 2px purple;} .box2{border:solid 2px red;} </style> </head> <body> <form name="login" action="

Hexo-NexT 设置圆角

在 blog_root/source/_data/variables.styl 中增加下列代码: // 圆角设置 $border-radius-inner = 20px; $border-radius = 20px; 然后在 NexT 的配置文件 _config.yml 中取消 variables.styl 的注释: variable: source/_data/variables.styl 问题描述 侧边栏

CSS——内外边距及div居中

外边距的妙用:居中元素 margin: 0 auto div盒子居中 margin:0 auto; margin:0 margin:0 1px margin:0 1px 2px 3px 顺时针 上 右 下 左 完整代码 #box{ width:300px; border:1px solid black; margin:0 auto; } h2{ font-siz

【CSS】CSS练习,改自己博客园

:root{ } *{ user-select: none; } body{ background-image: linear-gradient( 103.3deg, rgba(252,225,208,1) 30%, rgba(255,173,214,1) 55.7%, rgba(162,186,245,1) 81.8% ); } #navigator{ } #navigator #navList{ list-style: none; display: f

Angular cdk 之 drag-drop

官网链接:https://material.angular.io/cdk/drag-drop/overview 使用示例: import {Component} from '@angular/core'; @Component({ selector: 'app-drag-drop-drop', template: ` <div class="dragParent" style="width: 5

在手机客户端图片之间出现白线问题(仅自用记录)

源码: <tr> <td align="left" style="display:block;margin-top:-2px;" valign="top"> <img alt="" border="0" src="" style="display: block;" width=""> &

中英文混版时的间距突然变大怎么通过CSS解决?

在使用Md2ll对Markdown编辑后的文章进行微信公众号排版时,突然遇到了一个问题——中英文混版时的间距突然变大,就像下面这样: 我是研究了两三个小时没找到好的办法,在青苗科技工作室问了小伙伴小龙才知道问题的根源,可通过一行CSS代码word-break:break-all;解决问题。针对Md2ll的自定

迷宫

迷宫 <html lang="zh-CN" class="translated-ltr"> <head> <meta charset="UTF-8"> <title>迷宫</title> <style type="text/css"> canvas { display: block; margin: 50px auto; box-