CSS边框渐变实现方法：伪元素和box-shadow技巧

CSS\u4e2d\u7684border\u5c5e\u6027\u672c\u8eab\u4e0d\u652f\u6301\u6f6e\u53d8\u6548\u679c\u3002\u4f46\u662f\u53ef\u4ee5\u901a\u8fc7\u5176\u4ed6\u7684CSS\u5c5e\u6027\u548c\u6280\u5de7\u6765\u5b9e\u73b0\u8fb9\u6846\u7684\u6f6e\u53d8\u6548\u679c\u3002\u4ee5\u4e0b\u662f\u4e24\u79cd\u5b9e\u73b0\u65b9\u6cd5\uff1a\n\n1\u3002\u4f7f\u7528\u4f5c\u5143\u7d20\u548c\u80cc\u666f\u6f6e\u53d8\n\u53ef\u4ee5\u4f7f\u7528\u4f5c\u5143\u7d20\u6765\u521b\u5efa\u4e00\u4e2a\u548c\u5143\u7d20\u4e00\u6837\u5927\u5c0f\u7684\u5bb9\u5668\uff0c\u7136\u540e\u5728\u8be5\u5bb9\u5668\u4e0a\u8bbe\u7f6e\u80cc\u666f\u6f6e\u53d8\u6548\u679c\uff0c\u6700\u540e\u5c06\u5bb9\u5668\u5b9a\u4f4d\u5728\u5143\u7d20\u7684\u8fb9\u6846\u4e0a\u3002\u5177\u4f53\u5b9e\u73b0\u4ee3\u7801\u5982\u4e0b\uff1a\ncss\ndiv {\n position: relative;\n width: 200px;\n height: 200px;\n border: none;\n}\n\ndiv::before {\n content: \'\';\n position: absolute;\n top: -5px;\n left: -5px;\n right: -5px;\n bottom: -5px;\n z-index: -1;\n background: linear-gradient(to right, red, blue);\n}\n\n\u8fd9\u6837\u5c31\u53ef\u4ee5\u5728div\u5143\u7d20\u7684\u8fb9\u6846\u4e0a\u5b9e\u73b0\u5de6\u53f3\u6f6e\u53d8\u7684\u6548\u679c\u3002\n\n2\u3002\u4f7f\u7528box-shadow\n\u53ef\u4ee5\u4f7f\u7528box-shadow\u5c5e\u6027\u6765\u5b9e\u73b0\u8fb9\u6846\u7684\u6f6e\u53d8\u6548\u679c\u3002\u5177\u4f53\u5b9e\u73b0\u4ee3\u7801\u5982\u4e0b\uff1a\ncss\ndiv {\n width: 200px;\n height: 200px;\n border: none;\n box-shadow: inset 0 0 0 5px red, inset 0 0 0 10px blue;\n}\n\n\u8fd9\u6837\u5c31\u53ef\u4ee5\u5728div\u5143\u7d20\u7684\u8fb9\u6846\u4e0a\u5b9e\u73b0\u5de6\u53f3\u6f6e\u53d8\u7684\u6548\u679c\u3002\u9700\u8981\u6ce8\u610f\u7684\u662f\uff0cbox-shadow\u5c5e\u6027\u7684inset\u5173\u952e\u8bcd\u8868\u793a\u969c\u5149\u5728\u5143\u7d20\u5185\u90e8\uff0c\u800c\u4e0d\u662f\u5916\u90e8\u3002\n\n\u4ee5\u4e0a\u4e24\u79cd\u65b9\u6cd5\u90fd\u53ef\u4ee5\u5b9e\u73b0\u8fb9\u6846\u7684\u6f6e\u53d8\u6548\u679c\uff0c\u5177\u4f53\u9009\u62e9\u54ea\u79cd\u65b9\u6cd5\u53d6\u51b3\u4e8e\u5b9e\u9645\u9700\u6c42\u548c\u517c\u540c\u6027\u8981\u6c42\u3002'}