css实现右边边框分割线 渐变色，边框四角样式

本文主要是介绍css实现右边边框分割线 渐变色，边框四角样式，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

分割线 代码

  .data-item:first-of-type {border-right: 2px solid;border-image: linear-gradient(to top,rgba(0, 0, 0, 0.1) 0%,rgba(81, 110, 197, 0.76) 50%,rgba(0, 0, 0, 0.1) 100%)1;padding: 15px 0;}

四角边框样式 代码

.chart-box {cursor: pointer;background: linear-gradient(to left, #03a9f3, #03a9f3) left top no-repeat,linear-gradient(to bottom, #03a9f3, #03a9f3) left top no-repeat,linear-gradient(to left, #03a9f3, #03a9f3) right top no-repeat,linear-gradient(to bottom, #03a9f3, #03a9f3) right top no-repeat,linear-gradient(to left, #03a9f3, #03a9f3) left bottom no-repeat,linear-gradient(to bottom, #03a9f3, #03a9f3) left bottom no-repeat,linear-gradient(to left, #03a9f3, #03a9f3) right bottom no-repeat,linear-gradient(to left, #03a9f3, #03a9f3) right bottom no-repeat;background-size: 2px 10px, 10px 2px, 2px 10px, 10px 2px;transition: all 0.4s ease;border: 1px solid transparent;position: absolute;left: 0px;top: 10px;
}.chart-box:hover {border: 1px solid #357bc6;
}

这篇关于css实现右边边框分割线 渐变色，边框四角样式的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---