css
checkMa
雪千山,何处寻得,人间春色
展开
-
使用简单的js实现圆弧布局
使用简单js实现圆弧布局如图所示效果代码如下<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style> #circle{ width: 3原创 2020-07-23 16:43:53 · 2012 阅读 · 2 评论 -
使用css实现图片填充容器后居中
使用css实现图片填充容器后居中在图片展示的过程中,当我们在处理未知宽高的图片时,很多时候图片要么变形,要么只占了空间的一半,要么剧中,上下留白,左右留白,感觉很不好看。先看效果是不是你想要的:原图效果图css代码div{ width: 100px; height: 100px;}div > img{ position: static; display: block; width: 100%; height: 100%; -o-object-原创 2020-07-08 17:26:33 · 579 阅读 · 0 评论 -
给table的td设置了 colspan 失效
给table的td设置了 width 内联样式后失效代码示例和效果当我们使用了以下代码时,会发现td的宽度根本不会跟着colspan来排列,在td上设置width也是没有用的;<table border width="100%"> <tbody> <tr> <td colspan="2" ></td> <td colspan="2" ></td> <td colspan="2" >原创 2020-05-09 18:18:48 · 6388 阅读 · 0 评论 -
使用js写一个圆形柱状图,语法为react
效果图jsimport React from 'react';import { withRouter } from 'react-router-dom';import './test.less';class Test extends React.Component { /** * 计算柱状图的坐标 * @params num Number 柱状图个数 * @p...原创 2020-02-12 11:55:42 · 417 阅读 · 0 评论 -
使用css画个太极圈
使用css画个太极圈效果图htmlless效果图html <div className="circle-box"> <div className="circle"> <div className="white" /> <div className="black" /> </div> </di...原创 2020-02-10 21:13:50 · 221 阅读 · 0 评论 -
在table里边实现文字换行效果
代码方法1、用css处理 // 注意,这个代码会影响到框架Table组件的样式,建议写给目标table加个class .table{ table-layout: fixed; } .table td{ word-wrap: break-word; }方法2、html 内联样式 <table style="table-layout: fixed;"> <...原创 2019-11-08 10:32:05 · 1380 阅读 · 1 评论 -
如何去除 css animation 的渐变过程
需求在react或者vue这种单页面应用的项目里,我们使用定时器来实现动画时需要做销毁定时器操作,但是有时候是个很小的动画效果,也要做销毁,这个挺麻烦的。那我们为什么不用css动画代替呢?做法@keyframes 的属性是0%到100%,假如我们写的是0%-100%,那绝对会有渐变效果@keyframes twinkling{ 0%{ opacity: 0; } ...原创 2019-08-19 18:47:41 · 3149 阅读 · 2 评论 -
使用js换算mm,cm,px
问题开始今天工作上遇到了一个问题,用户需要在网页上的A4纸上盖章,且章子必须尺寸与纸张尺寸需要一致。用户自己是可以设置印章尺寸的,但是我将印章的尺寸需要转化成px来定位,那么问题来了,如何将毫米mm转为像素呢?我在网上找了一堆答案,恕我直言,在座位的各位的答案,如同断水流大师兄所言。。。很多博客都是一大堆道理,然鹅实操呢?我看了十几二十篇博客,没一个能快速实现我想要的效果。假如你也看到了我写的...原创 2019-07-08 16:10:59 · 7804 阅读 · 2 评论 -
文字下划线往两端展开的css效果
这里的效果是利用了scale属性放大缩小中心点为当前元素的圆心来实现的html<ul> <li class="active">选项一</li> <li>选项二</li></ul>cssul,li{ list-style:none;}li{ display: inline-block; position...原创 2019-04-24 14:40:23 · 452 阅读 · 0 评论 -
css实现多行文字省略号失效
问题在react项目中遇到过这么个问题,一般我们通过下面的css属性都能实现多行省略,但是在react却会失效 display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; word-break: break-all;测...原创 2019-04-01 17:59:37 · 2193 阅读 · 1 评论