奇妙的 CSS shapes(CSS图形)

CSS 发展到今天已经越来越强大了。其语法的日新月异，让很多以前完成不了的事情，现在可以非常轻松的做到。今天就向大家介绍几个比较新的强大的 CSS 功能：

  • clip-path
  • shape-outside

shape 的意思是图形，CSS shapes 也就是 CSS 图形的意思，也就是使用 CSS 生成各种图形（圆形、矩形、椭圆、多边形等几何图形）。

CSS3之前，我们能做的只有矩形，四四方方，条条框框。

 

CSS3

CSS3出来后，我们有了更广阔的施展空间，通过

  • border-radius
  • border
  • transform
  • 伪元素配合
  • gradient 渐变

我们能够作出非常多的几何图形。

除去最常见的矩形，圆形（

border-radius
），下面稍微列举一些其他几何图形：

三角形

通常会使用透明的border模拟出一个三角形：

.traingle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid yellowgreen;
}

image

切角

《CSS Secret》里面的方法，采用多重线性渐变实现切角。

.notching {
width: 40px;
height: 40px;
padding: 40px;
background: linear-gradient(135deg, transparent 15px, yellowgreen 0) top left,
linear-gradient(-135deg, transparent 15px, yellowgreen 0) top right,
linear-gradient(-45deg, transparent 15px, yellowgreen 0) bottom right,
linear-gradient(45deg, transparent 15px, yellowgreen 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
}

image

梯形

利用伪元素加旋转透视实现梯形：

 .trapezoid{
position: relative;
width: 60px;
padding: 60px;
}
.trapezoid::before{
content:"";
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
transform: perspective(20px) scaleY(1.3) rotateX(5deg);
transform-origin: bottom;
background: yellowgreen;
}

当然，还有另一种更简单的方法是利用border实现，借助上面的构造三角形的方法，在矩形两侧构造两个透明的三角形：

.trapezoid {
position: relative;
width: 60px;
border-top: 60px solid yellowgreen;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
}

image

五边形

梯形加上三角形，很容易就组合成一个五边形，这里需要借助一个伪元素实现：

.pentagon {
position: relative;
width: 60px;
border-bottom: 60px solid yellowgreen;
border-left: 40px solid transparent;
border-right: 40px solid transparent; 
}
.pentagon::before {
content:"";
position: absolute;
top: 60px;
left: -40px;
border-top: 60px solid yellowgreen;
border-left: 70px solid transparent;
border-right: 70px solid transparent;
}

image

六边形

看看上面的梯形，如果两个反方向且底边同样大小的梯形，叠加在一起，是不是就能得到一个六边形呢？

.pentagon {
position: relative;
width: 60px;
border-bottom: 60px solid yellowgreen;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
}
.pentagon::before {
content: "";
position: absolute;
width: 60px;
height: 0px;
top: 60px;
left: -40px;
border-top: 60px solid yellowgreen;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
}

image

八边形

六边形都解决了，八边形也不在话下，一个矩形加上两个梯形，可以合成一个八边形。

.octagon {
position: relative;
width: 40px;
height: 100px;
background: yellowgreen;
}
.octagon::before {
content: "";
height: 60px;
position: absolute;
top: 0;
left: 40px;
border-left: 30px solid yellowgreen;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
.octagon::after {
content: "";
height: 60px;
position: absolute;
top: 0;
left: -30px;
border-right: 30px solid yellowgreen;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}

image

五角星

好的，探索完多边形，我们继续探索X角星。

先来看看五角星，要怎么实现呢？当然是直接打出来啦 -- ★☆

ditou

开个玩笑，这里使用 3 个三角形叠加旋转在一起实现。

.star {
margin: 50px 0;
position: relative;
width: 0;
border-right: 100px solid transparent;
border-bottom: 70px  solid yellowgreen;
border-left: 100px solid transparent;
transform: rotate(35deg) scale(.6);
}
.star:before {
content: '';
position: absolute;
border-bottom: 80px solid yellowgreen;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
top: -45px;
left: -65px;
transform: rotate(-35deg);
}
.star:after {
content: '';
position: absolute;
top: 3px;
left: -105px;
border-right: 100px solid transparent;
border-bottom: 70px solid yellowgreen;
border-left: 100px solid transparent;
transform: rotate(-70deg);
}

image

六角星

六角星呢？想象一下，一个向上的三角形 ▲，叠加上一个向下的三角形 ▼，就可以得到一个六边形：

.sixstar {
position: relative;
width: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid yellowgreen;
}
.sixstar:after {
content: "";
position: absolute;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid yellowgreen;
top: 30px;
left: -50px;
}

image

八角星

八角星呢？八个角那么多呢。其实使用两个矩形进行旋转拼接就可以了。

.eightstar {
position: relative;
width: 100px;
height: 100px;
background-color: yellowgreen;
transform: rotate(30deg);
}
.eightstar::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
transform: rotate(45deg);
background-color: yellowgreen;
}

image

十二角星

好。最后多角星再来一个十二级角星。在八角星的基础上，再增加一个矩形，就能得到十二角啦。也就是要过第一个伪元素。

.twelvestar {
position: relative;
width: 100px;
height: 100px;
margin-bottom: 100px!important;
background-color: yellowgreen;
transform: rotate(30deg);
}
.twelvestar::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
transform: rotate(30deg);
background-color: yellowgreen;
}
.twelvestar::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
transform: rotate(60deg);
background-color: yellowgreen;
}

image

椭圆

最后，再来使用传统的方法画一个椭圆，过去 CSS3 画椭圆，基本上只能借助 border 实现。

这里使用 border 画一个蛋的形状：

.ellipse {
width: 120px;
height: 160px;
background-color: yellowgreen;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

image

CodePen -- CSS Shapes(CSS 几何图形)

title="CSS shapes" src="https://codepen.io/Chokcoco/embed/NgxNrq/?height=265&theme-id=0&default-tab=css,result&embed-version=2" frameborder="no" scrolling="no" width="320" height="265">

上面所讲述的是使用传统 CSS3 的方式绘制几何图形，前人栽树后人乘凉，之前的大牛们在 CSS 绘制几何图形上已经做了非常深入的研究，更多的 CSS 图形你可以戳这里：The Shapes of CSS 。接下来我们将要了解一些更高级的绘制几何图形的方法。

如果你看到了这里，恭喜你，本文的正文从这里开始。

juewang

  

clip-path

CSS 新属性 

clip-path
，意味裁剪路径的意思，让我们可以很便捷的生成各种几何图形。

clip-path 通过定义特殊的路径，实现我们想要的图形。而这个路径，正是 SVG 中的 path 。

看看它的 API：

{
/* Keyword values */
clip-path: none;
/* Image values */ 
clip-path: url(resources.svg#c1);
/* Box values
clip-path: fill-box;
clip-path: stroke-box;
clip-path: view-box;
clip-path: margin-box
clip-path: border-box
clip-path: padding-box
clip-path: content-box
/* Geometry values */
clip-path: inset(100px 50px);
clip-path: circle(50px at 0 100px);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
/* Box and geometry values combined */
clip-path: padding-box circle(50px at 0 100px);
/* Global values */
clip-path: inherit;
clip-path: initial;
clip-path: unset;
}

看上去很多，其实很好理解，如果接触过 SVG 的 path，其实就是照搬 SVG 的 path 的一些定义。换言之，如果没有接触过 SVG，看完本文后再去学习 SVG 路径 ，也会十分容易上手。

根据不同的语法，我们可以生成不同的图形。

例如 

clip-path: circle(50px at 50px 50px)
 表示在元素的 （50px, 50px）处，裁剪生成一个半径为 50px 的圆。

以元素的左上角为坐标起点

而整个 

clip-path
 属性，最为重要的当属  
polygon
，可以利用  
polygon
 生成任意多边形。

 

clip-path 示例

下面分别列举使用 clip-path 生成一个圆形和一个十边形。

/* 圆形 */
.circle {
width: 100px;
height: 100px;
background-color: yellowgreen; 
clip-path: circle(50px at 50px 50px);
}
/* 十边形 */
.polygon {
width: 100px;
height: 100px;
background-color: yellowgreen; 
clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%);
}

image

clip-path: circle(50px at 50px 50px)
 上文也讲了，表示在元素的 （50px, 50px）处，裁剪生成一个半径为 50px 的圆。

而在 

clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%)
 中，依次列出了 10 个坐标点。我们的图形就是依次连接这 10 个坐标点形成一个裁切图形。

当然，这里采用的是百分比，也可以使用具体的数值。

 

clip-path 动画

clip-path 另外一个强大之处在于可以进行 CSS transtion 与 CSS animation，也就是过渡和动画。

看一个多边形的过渡切换动画。

Clip-path 多边形过渡动画

CodePen Demo -- Clip-path 多边形过渡动画

title="clip-path polygon-animate" src="https://codepen.io/Chokcoco/embed/LLNWyZ/?height=265&theme-id=0&default-tab=css,result&embed-version=2" frameborder="no" scrolling="no" width="320" height="265">

图形变换动画

除此之外，我们还可以尝试，将一个完整的图形，分割成多个小图形，这也是 

clip-path
 的魅力所在，纯 CSS 的图形变换：

clip-path4

CodePen Demo -- Clip-path triangle2rect

title="clip-path triangle2rect" src="https://codepen.io/Chokcoco/embed/yXOjZm/?height=265&theme-id=0&default-tab=css,result&embed-version=2" frameborder="no" scrolling="no" width="320" height="265">

 

clip-path 动画的局限

clip-path 动画虽然美好，但是存在一定的局限性，那就是进行过渡的两个状态，坐标顶点的数量必须一致。

也就是如果我希望从三角形过渡到矩形。假设三角形和矩形的 

clip-path
 分别为：

  • 三角形：
    clip-path: polygon(50% 0, 0 100%, 100% 0)
  • 矩形： 
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)

进行过渡动画时候，直接从 

polygon(50% 0, 0 100%, 100% 0)
 -->  
polygon(0 0, 100% 0, 100% 100%, 0 100%)
 是不行的，因为是从 3 个坐标点变换到 4 个坐标点。

因此这里需要这用一个讨巧的办法，在三角形的表示方法中，使用四个坐标点表示，其中两个坐标点进行重合即可。也就是：

  • 三角形：
    clip-path: polygon(50% 0, 0 100%, 100% 0)
     -> 
    clip-path: polygon(50% 0, 50% 0, 0 100%, 100% 0)

 

N边形过渡动画

如果脑洞够大，随机生成 N（N>=1000）边形，进行变换，会是什么效果呢？

see one see：

o_npolygon

CodePen Demo -- 2000边形过渡动画

title="clip-path Fxxk" src="https://codepen.io/Chokcoco/embed/XgJRzO/?height=265&theme-id=0&default-tab=js,result&embed-version=2" frameborder="no" scrolling="no" width="320" height="265">

变换的瞬间很有爆炸的感觉。不过这里有个很大的问题，只是随机生成了 2000 个坐标点，然后使用 

clip-path
 将这些坐标点连接起来，并不是符合要求的多边形。

在 VUE官网，有下面这样一个例子，一个规则的多边形进行不断的过渡动画，非常酷炫：

o_vue

VUE官网使用的是 SVG 实现的，这里我稍微改变了下，使用 CSS 

clip-path
 实现：

CodePen Demo -- clip-path N polygon ，感兴趣可以看看。

title="clip-path N polygon" src="https://codepen.io/Chokcoco/embed/NgqGOo/?height=265&theme-id=0&default-tab=js,result&embed-version=2" frameborder="no" scrolling="no" width="320" height="265"> 

 

shape-outside

最后再来看看 

shape-outside
，另外一个有趣的有能力生成几何图形的属性。 

shape-outside
 是啥？它也有制造各种几何图形的能力，但是它只能和浮动  
float
 一起使用。

虽然使用上有所限制，但是它赋予了我们一种更为自由的图文混排的能力。

先看看它的 API，看上去貌似很复杂：

{
/* Keyword values */
shape-outside: none;
shape-outside: margin-box;
shape-outside: content-box;
shape-outside: border-box;
shape-outside: padding-box;
/* Function values */
shape-outside: circle();
shape-outside: ellipse();
shape-outside: inset(10px 10px 10px 10px);
shape-outside: polygon(10px 10px, 20px 20px, 30px 30px);
/* <url> value */
shape-outside: url(image.png);
/* Gradient value */
shape-outside: linear-gradient(45deg, rgba(255, 255, 255, 0) 150px, red 150px);
/* Global values */
shape-outside: initial;
shape-outside: inherit;
shape-outside: unset;
}

但是，其实它和 

clip-path
 的语法非常类似，很容易触类旁通。看看实例，更易理解：

大家自行去熟悉下 API，接着假设我们有下面这样的结构存在：

<div class="container">
<div class="shape-outside">
<img src="image.png">
</div>
xxxxxxxxxxx，文字描述，xxxxxxxxx
</div>

定义如下 CSS：

.shape-outside {
width: 160px;
height: 160px;
shape-outside: circle(80px at 80px 80px);
float: left;
}

注意，上面 

.shape-outside
 使用了浮动，并且定义了  
shape-outside: circle(80px at 80px 80px)
 ，表示在元素的 (80px, 80px) 坐标处，生成一个 80px 半径的圆。

如此，将会产生一种图文混排的效果：

o_shape-outside

CodePen Demo -- 图文混排 shape-outside

title="shape-outside" src="https://codepen.io/Chokcoco/embed/owxedZ/?height=265&theme-id=0&default-tab=html,result&embed-version=2" frameborder="no" scrolling="no" width="320" height="265">

嗯？好像没什么了不起啊？这不就是 

float
 的效果吗？

不，不是的，看看 

float
 和 加上 
shape-outside
 后的对比：

t_float-shapeoutside

看出区别了吗？使用了 

shape-outside
 ，真正的实现了文字根据图形的轮廓，在其周围排列。

image

上图是使用开发者工具选取了作用了 

shape-outside
 的元素，可以看到，使用了特殊的蓝色去标记几何图形的轮廓。在这个蓝色区域之外，文字都将可以进行排列。

 

shape-outside
 的本质

划重点，划重点，划重点。

所以，

shape-outside
 的本质其实是生成几何图形，并且裁剪掉其几何图形之外周围的区域，让文字能排列在这些被裁剪区域之内。

所以，了解了这个本质之后，我们再看看一些更复杂的图文混排。

平行四边形

o_shape-outside3

CodePen Demo -- 图文混排 shape-outside

心形、菱形

image

CodePen Demo -- 图文混排 shape-outside

 

clip-path 与 shape-outside 的兼容性

额，比较遗憾，这两个属性的兼容性目前仍处于比较尴尬的境地。感兴趣的可以看看 CANIUSE 。全面兼容使用仍需努力。

所以本文所展示的 Demo 都是在 

-webkit-
 内核浏览器下完成的。

 

最后

系列 CSS 文章汇总在我的 Github 。

到此本文结束，如果还有什么疑问或者建议，可以多多交流，原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/368027.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

c++ map 多线程同时更新值 崩溃_深入理解并发安全的 sync.Map

c++ map 多线程同时更新值 崩溃_深入理解并发安全的 sync.Map

golang中内置了map关键字&#xff0c;但是它是非线程安全的。从go 1.9开始&#xff0c;标准库加入了sync.Map&#xff0c;提供用于并发安全的map。普通map的并发问题map的并发读写代码func main() { m : make(map[int]int) go func() { for { _ m[1] // 读 } }(…
阅读更多...
java 递归从子节点删除父节点_LeetCode450. 删除二叉搜索树中的节点

java 递归从子节点删除父节点_LeetCode450. 删除二叉搜索树中的节点

删除一个二叉搜索树中的节点&#xff0c;需要进行情况的分类讨论&#xff0c;看一下将这个节点删除之后是否需要对二叉搜索树进行调整&#xff08;为了保持树的连接和维持二叉搜索树的性质&#xff09;。&#xff08;1&#xff09;如果删除的是一个叶子节点&#xff0c;那问题不…
阅读更多...
1. [文件]- 文件类型，文件open模式

1. [文件]- 文件类型，文件open模式

1.文件类型&#xff1a;文本文件和二进制文件 硬盘中的文件保存为01010101格式&#xff0c;一般读取文件是把文件从硬盘中读取到内存中。 文本文件需要进行格式转换才能读取出来。二进制文件一般用于传输二进制文件&#xff1a;视频图片 2.文件打开模式 几种不同的读取和遍历文…
阅读更多...
node安装node-sass失败，配置淘宝源

node安装node-sass失败，配置淘宝源

node-sass 安装失败的原因是因为无法下载 .node 文件&#xff0c;解决办法就很简单了&#xff0c;就是我们把文件下载路径复制一份到浏览器里&#xff0c;然后使用浏览器下载文件就可以了。 具体方法 1.从node命令行中复制 .node文件下载链接并在浏览器打开下载文件https:/…
阅读更多...
带有Atomikos示例的Tomcat中的Spring JTA多个资源事务

带有Atomikos示例的Tomcat中的Spring JTA多个资源事务

在本教程中&#xff0c;我们将向您展示如何使用Atomikos Transaction Manager在Tomcat服务器中实现JTA多个资源事务。 Atomicos事务管理器为分布式事务提供支持。 这些是多阶段事务&#xff0c;通常使用多个数据库&#xff0c;必须以协调的方式提交。 分布式事务由XA standard描…
阅读更多...
mac vs 返回上一步_mac电脑打不开应用程序的解决方法

mac vs 返回上一步_mac电脑打不开应用程序的解决方法

mac电脑跟windows电脑一样&#xff0c;经常会出现打不开应用程序的情况&#xff0c;并且提示“因为它来自身份不明的开发者”&#xff0c;也不知道哪里出现问题&#xff1f;由于MAC系统与windows界面不一样&#xff0c;很多小编不懂怎么操作&#xff1f;为此&#xff0c;小编给…
阅读更多...
iOS-----------关于组件化

iOS-----------关于组件化

打一个比较形象的比喻&#xff0c;把APP比作我们的人体&#xff0c;把胳膊、大腿、心、肝、肺这些人体器官比作组件&#xff0c;各个器官分别负责他们各自的功能&#xff0c;但是他们之间也有主次之分&#xff0c;试想我们的胳膊、大腿等是不能独立完成某个任务的&#xff0c;必…
阅读更多...
android 自定义switch控件,Android中switch自定义样式

android 自定义switch控件,Android中switch自定义样式

android 原生开关按钮控件 Switch 提供样式自定义方式&#xff0c;可供我们修改为适合我们开发使用的样式控件&#xff0c;自定义样式过程如下:自定义switch切换drawable新建swith_thumb.xml文件自定义switch轨道drawable新建switch_track.xmln文件,轨迹如果在选中与否过程并没…
阅读更多...
具有瞬态属性的视图对象的钝化和激活

具有瞬态属性的视图对象的钝化和激活

在应用程序模块的钝化/激活周期内&#xff0c;框架也会钝化并激活视图对象。 通常&#xff0c;框架保存有关VO状态&#xff0c;当前行&#xff0c;绑定变量值等的信息。 但是没有数据。 激活视图对象后&#xff0c;将重新执行VO的查询&#xff0c;并重新获取数据。 在大多数情况…
阅读更多...
pre标签的样式

pre标签的样式

你可能正在使用 <pre> 标签。这是一个 HTML 中非常特别的标签&#xff0c;它允许其中的空格真正显示出来。例如&#xff1a;四个空格将真实显示成四个空格。这不同于其他标签通常的做法&#xff0c;其他标签会将之间的空白压缩成一个。从这一点来说&#xff0c;<pre&g…
阅读更多...
js的闭包

js的闭包

function a(){var n 0;this.inc function () {n; console.log(n);}; } var c new a(); c.inc(); //控制台输出1 c.inc(); //控制台输出2 什么是闭包&#xff1f;这就是闭包&#xff01;&#xff01;有权访问另一个函数作用域内变量的函数都是闭包。当函数可以记住并访…
阅读更多...
远程管理口怎么看地址_红烧羊肉怎么样做才能滋味浓郁，咸甜适口，且回味有奶香？看这里...

远程管理口怎么看地址_红烧羊肉怎么样做才能滋味浓郁，咸甜适口，且回味有奶香？看这里...

原汁原味红烧羊肉此菜在制作上不同于其他红烧羊肉时要放入香料去膻&#xff0c;但在选料上很讲究&#xff0c;也就是说食材的好坏决定菜的好坏。选用一年生的崇明母山羊制作&#xff0c;膻味很小&#xff0c;肉质软嫩细腻&#xff0c;且带有一股淡淡奶香&#xff0c;因此不必放…
阅读更多...
css段落文字（中英文混杂）实现两端对齐

css段落文字（中英文混杂）实现两端对齐

案例如下&#xff1a; 混合使用汉字和英文的段落默认如下&#xff1a; 两边是不对齐的(一般情况下&#xff0c;我们对这种情况不做处理&#xff0c;除非需求或者设计非要我们实现两端对齐)。 对齐之后如下&#xff1a; 实现思路 一般的两端对齐是使用text-align:justify&…
阅读更多...
44集合：蒜头军学英语

44集合：蒜头军学英语

转载于:https://www.cnblogs.com/passion-sky/p/8424769.html
阅读更多...
android病毒下载地址,LINE病毒查杀

android病毒下载地址,LINE病毒查杀

LINE病毒查杀是免费通话、免费传讯「LINE」的周边应用程序之一。它能保护智能手机上个人信息的安全&#xff0c;使其免于病毒或恶意程序的侵害。您只要执行几个简单的步骤就能确认手机状态或完成病毒扫描。LINE病毒查杀界面LINE病毒查杀软件功能1、智能手机上的病毒将无所遁形!…
阅读更多...
android app的签名,Android APP的签名

android app的签名,Android APP的签名

Android APP的签名Android项目以它的包名作为唯一的标识&#xff0c;如果在同一部手机上安装两个包名相同的APP&#xff0c;后者就会覆盖前面安装的应用。为了避免Android APP被随意覆盖&#xff0c;Android要求对APP进行签名。下面介绍对APP进行签名的步骤1、选择builder菜单下…
阅读更多...
5.6.50 mysql 用什么驱动_日均5亿查询量的京东订单中心，为什么舍弃MySQL用ES？

5.6.50 mysql 用什么驱动_日均5亿查询量的京东订单中心，为什么舍弃MySQL用ES？

京东到家订单中心系统业务中&#xff0c;无论是外部商家的订单生产&#xff0c;或是内部上下游系统的依赖&#xff0c;订单查询的调用量都非常大&#xff0c;造成了订单数据读多写少的情况。我们把订单数据存储在MySQL中&#xff0c;但显然只通过DB来支撑大量的查询是不可取的。…
阅读更多...
可搜索的文件？ 是的你可以。 选择AsciiDoc的另一个原因

可搜索的文件？ 是的你可以。 选择AsciiDoc的另一个原因

Elasticsearch是一个基于Apache Lucene的灵活&#xff0c;功能强大的开源&#xff0c;分布式实时云搜索和分析引擎&#xff0c;可提供全文搜索功能。 它是面向文档且无架构的。 Asciidoctor是一个纯Ruby处理器&#xff0c;用于将AsciiDoc源文件和字符串转换为HTML 5 &#xff…
阅读更多...
Jquery 获取table当前行内容

Jquery 获取table当前行内容

$("a[namecheckOriginal]").click(function () { var parent $(this).parent().parent().find("td"); var moduleEnum parent.eq(7).text(); if(moduleEnum""){ } alert(moduleEnmu);}); 转载于:https://www.cnblogs.com/austi…
阅读更多...
监视和检测Java应用程序中的内存泄漏

监视和检测Java应用程序中的内存泄漏

因此&#xff0c;您的应用程序内存不足&#xff0c;您日夜不停地分析应用程序&#xff0c;以期捕获对象中的内存漏洞。 后续步骤将说明如何监视和检测您的内存泄漏&#xff0c;以确保您的应用程序安全。 1.怀疑内存泄漏 如果您怀疑有内存泄漏&#xff0c;可以使用一种方便的方…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023